magicLink
A wallet configurator for Magic Wallet which allows integrating the wallet with React
import { magicLink } from "@thirdweb-dev/react";
const magicLinkConfig = magicLink({
apiKey: "MAGIC_API_KEY,
type: 'auth' // or 'connect'
});
customize (optional)
options
type (optional)
apiKey (required)
magicSdkConfiguration (optional)
smsLogin (optional)
emailLogin (optional)
oauthOptions (optional)
recommended (optional)
Usage with ConnectWallet
To allow users to connect to this wallet using the ConnectWallet component, you can add it to ThirdwebProvider's supportedWallets prop.
<ThirdwebProvider
supportedWallets={[
magicLink({
apiKey: "MAGIC_API_KEY",
}),
]}
clientId="your-client-id"
>
<YourApp />
</ThirdwebProvider>
Usage with useConnect
you can use the useConnect
hook to programmatically connect to the wallet without using the ConnectWallet component.
The wallet also needs to be added in ThirdwebProvider's supportedWallets if you want the wallet to auto-connect on next page load.
Calling connect
opens the Magic's Modal and prompts the user to either enter an OTP sent to their phoneNumber or click on the link sent to their email.
const magicLinkConfig = magicLink({
apiKey: "MAGIC_API_KEY",
});
function App() {
const connect = useConnect();
const handleConnect = async () => {
await connect(magicLinkConfig, connectOptions);
};
return <div> ... </div>;
}