OAuth Implementation

OAuth Implementation

#Overview

With Magic, you can use OAuth as an authentication mechanism, giving users a simple way to log in with supported social providers.

Applications can be integrated with the following social providers: Google, Facebook, Twitter, Apple, Discord, GitHub, LinkedIn, Twitch, Bitbucket and Microsoft.

note

OAuth SDK methods are only available with Dedicated Wallet. Universal Wallets have Google One Tap enabled as part of the built-in UI but do not support other social providers. Refer to the Login UI page for more information.

#Use Cases

  • Log in and create wallets for end users with OAuth for authentication.

#Usage

You can use OAuth by creating a project with our CLI tool and selecting your preferred social providers when prompted. Alternatively, you can directly integrate it into your existing projects using the instructions below. Refer to the API documentation for information on how to install and initialize Magic for your existing project.

#Installation

Social Logins work as an extension to Magic SDK. To add Social Login to your Magic integration, start by installing the OAuth Extension:

NPM
Yarn
01npm install magic-sdk @magic-ext/oauth

#Initialization

When creating your Magic instance, you'll need to add an instance of OAuthExtension to the Magic constructor:

Web
01import { Magic } from 'magic-sdk';
02import { OAuthExtension } from '@magic-ext/oauth';
03
04// Must use a Dedicated Wallet API Key
05const magic = new Magic('YOUR_API_KEY', {
06  extensions: [new OAuthExtension()],
07});

#Login

Once you've created a Magic instance, kick off the OAuth login with loginWithRedirect on the web and loginWithPopup on mobile.

Once logged in, you will have access to a DID token that can be used with our Admin SDK to verify the user's information and wallet address on the backend. On mobile SDKs, this is provided as the result of loginWithPopup, while on the web SDK you can retrieve this and other information about the OAuth result with getRedirectResult. The getRedirectResult function returns an object that includes user information. On mobile, you can get similar user info, such as wallet address and email, with getMetadata.

Web
React Native
iOS
Android
Flutter
01// Assumes you've initialized a `Magic` instance with a Dedicated Wallet API Key
02const beginOAuthFlow = () => {
03  await magic.oauth.loginWithRedirect({
04    provider: '...' /* 'google', 'facebook', 'apple', or 'github'   */,
05    redirectURI: 'https://your-app.com/your/oauth/callback',
06    scope: ['user:email'] /* optional */,
07  });
08}
09
10// Call this upon redirect back to application
11const handleOAuthResult = () => {
12  const result = await magic.oauth.getRedirectResult();
13  console.log(`OAuth result: ${result}`);
14
15  // Handle result information as needed
16}

The interface for the result of getRedirectResult is as follows:

Javascript
01interface OAuthRedirectResult {
02  magic: {
03    idToken: string;
04    userMetadata: MagicUserMetadata;
05  },
06  oauth: {
07    provider: string;
08    scope: string[];
09    accessToken: string;
10    userHandle: string;
11    userInfo: ...;
12  }
13};

#Resources