#Overview

Magic's authentication can enable passwordless Web3 onboarding (no seed phrases) using multiple configurable methods. Each method either creates an account address for the user (non-custodial) or utilizes an existing account address. This is handled completely by Magic with out-of-the-box UI, with no lift from the integrating dApp.

#Compatibility

The Login UI is available via the following client-side SDKs:

• Web
• React Native
• iOS
• Android

#Use Cases

• Allow your users to log in and/or sign up to your dApp using their preferred authentication method and gain access to their public wallet address on the network you are connected to.
• Using Dedicated Wallet you can collect a signed token for wallet address verification and skip the need to explictly request a personal signature which would prompt an additional screen. (For Universal Wallet, an event listener is needed to retrieve the signed token)

#Dedicated

#Authentication Methods

#Email One-Time Passcode

If a user chooses to authenticate through their email, they will recieve a unique code to their email that is generated per attempt and the user will be required to enter it to authenticate. OTPs for email provide a simple and effective way to increase security and ensure the safety of user assets.

#Usage

#Login

01import { Magic } from "magic-sdk"

02

03const magic = new Magic('YOUR_PUBLISHABLE_API_KEY', { 

04  network: "goerli",

05});

06

07const accounts = await magic.wallet.connectWithUI();

The example above authenticates the user and connects to the Ethereum Goerli Testnet. To connect to a different network, simply replace the configuration with another of the 25+ chains supported by Magic.

#Universal

#Authentication Methods

#Email One-Time Passcode

If a user chooses to authenticate through their email, they will recieve a unique code to their email that is generated per attempt and the user will be required to enter it to authenticate. OTPs for email provide a simple and effective way to increase security and ensure the safety of user assets.

#Google One-Tap

One-tap login with Google provides effortless authentication for your users that have Google Accounts. Utilizing the 'One Tap' sign-up API, users can create a secure and passwordless account with just one tap, all within the context of your application. Magic handles all of the authentication flow with Google with no setup for you dApp required.

#Third-Party Wallets

Magic Wallet allows users to connect with existing third-party wallets (e.g. MetaMask). When a user is asked for a public address, they can select a supported third-party wallet to use from the Magic Wallet login view. For more information, visit Third Party Wallets.

#Usage

Magic offers a utility method connectWithUI which will ask permission from your user's selected authentication method to connect to your dApp.

#Login

01import { Magic } from "magic-sdk"

02import Web3 from 'web3';

03

04const magic = new Magic('YOUR_PUBLISHABLE_API_KEY', { 

05  network: "goerli",

06});

07

08const provider = await magic.wallet.getProvider();

09

10const web3 = new Web3(provider);

11

12const accounts = await magic.wallet.connectWithUI();

#Log in with wallet verification

If you require a signature from the wallet’s private keys on authentication (same as a personal sign) in order to validate the ownership of the wallet address, you can do this by catching the following event after a login occurs as shown below. This requires the domain you are on is on the domain allowlist and verify the token using our Magic Admin SDK's token module.

If you would like to verify the ownership of a user's wallet address in a single login step, you can optionally listen for the id-token-created event that's fired after connectWithUI is called. The token will only be emitted for email or Google logins, and not for any 3rd party wallet connections.

01/* On the front end, collect the token as the user signs in */⁠

02await ⁠magic.wallet.connectWithUI().on('id-token-created', (params) => {

03 const { idToken } = params;

04 console.log(idToken);

05 // send to your resource server for validation with the Magic Admin SDK

06 // ...

07});

08

09/* Alternative to the above, if you are using a third party wallet provider or tool and wish to recieve the event, you can do the following. */

10await magic.rpcProvider.enable().on('id-token-created', (params) => {

11 const { idToken } = params;

12 console.log(idToken);

13 // send to your resource server for validation with the Magic Admin SDK

14 // ...

15});

16

17/* On your own resource server */

18const { MagicAdmin } = require('@magic-sdk/admin');

19const magicAdmin = await MagicAdmin.init('YOUR_SECRET_API_KEY');

20// ...

21

22/* In some context where the ID token from the FE is passed in */

23app.get('/login', async (req: any, res: any) => {

24  /*

25    Assumes DIDToken was passed in the Authorization header

26    in the standard `Bearer {token}` format.

27   */

28  const DIDToken = req.headers.authorization.substring(7);

29  magicAdmin.token.validate(DIDToken); // returns void, throws error if invalid

30  /* User is logged in. Set cookies! */

31});

Security Notes:

• The token provided is only valid for 90 seconds after the user has logged in.
• In the Admin SDK, the user’s token is validated against your client’s unique identifier to ensure the signature occurred on your application’s site.

⁠Alternatively, you can also explictly request a personal signature from the user with an additional confirmation screen.

#Device Registration

Find out more about Device Registration here.

#Configuration

• You can configure which authentication methods and/or third party wallets are supported by your dApp in your Dashboard settings.
• See how to brand this experience with your own logo and colors in the customization section.

#Resources

• Magic Connect Verification Demo
• magic.wallet.connectWithUI()
• magic.wallet.getProvider()