The Civic Auth Solana API is subject to change as we continue to develop and refine our solution.
Creating a Wallet
When a new user logs in, they do not yet have a Web3 wallet by default. You can create a wallet for them by calling the createWallet function on the user object. Here’s a basic example:
The useUser hook returns a user context object that provides access to the base library's in the 'user' field, and adds some Web3 specific fields. The returned object has different types depending on these cases:
If the user has a wallet,
type ExistingWeb3UserContext = UserContext & {
solana: {
address: string // the base58 public key of the embedded wallet
wallet: Wallet // a Solana Wallet object
}
}
See below for a full minimal example of a Solana Adapter app using Civic Auth for an embedded wallet.
import { ConnectionProvider, WalletProvider, useWallet, useConnection } from "@solana/wallet-adapter-react";
import { WalletModalProvider} from "@solana/wallet-adapter-react-ui";
import { CivicAuthProvider } from "@civic/auth-web3/react";
// Wrap the content with the necessary providers to give access to hooks: solana wallet adapter & civic auth provider
const App = () => {
const endpoint = "YOUR RPC ENDPOINT";
return (
<ConnectionProvider endpoint={endpoint}>
<WalletProvider wallets={[]} autoConnect>
<WalletModalProvider>
<CivicAuthProvider clientId="YOUR CLIENT ID">
<WalletMultiButton />
<AppContent/>
</CivicAuthProvider>
</WalletModalProvider>
</WalletProvider>
</ConnectionProvider>
);
};
// A simple hook to get the wallet's balance in lamports
const useBalance = () => {
const [balance, setBalance] = useState<number>();
// The Solana Wallet Adapter hooks
const { connection } = useConnection();
const { publicKey } = useWallet();
if (publicKey) {
connection.getBalance(publicKey).then(setBalance);
}
return balance;
};
// Separate component for the app content that needs access to hooks
const AppContent = () => {
// Get the Solana wallet balance
const balance = useBalance();
// Get the Solana address
const { publicKey } = useWallet();
return (
<>
{publicKey && (
<div>
<p>Wallet address: {publicKey.toString()}</p>
<p>Balance: {balance ? `${balance / 1e9} SOL` : "Loading..."}</p>
</div>
)}
</>
);
};
export default App;
The wallet object follows the interface used by .
The Civic Auth Web3 SDK uses the to expose the embedded wallet to React frontends. This allows you to use familiar hooks such as useWallet and useConnection to interact with the wallet.
Make sure to follow the steps described (React) and (Next.Js) to get started with the Solana Wallet Adapter.
The Civic Auth Web3 SDK follows the , meaning that the Solana Wallet Adapter will automatically discover the embedded wallet.
The above shows a minimal React example. Follow the integration to set up the CivicAuthProvider according to your framework.