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.

#Compatibility

note

OAuth SDK methods are only available with Dedicated Wallets. Magic SDK offers two OAuth extensions: v1 and v2. For web applications, it is recommended to use v2, while v1 should be used for mobile applications.

OAuth SDK methods are available via the following client-side SDKs:

#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/oauth2
02or
03npm 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/oauth2';
03or
04import { OAuthExtension } from '@magic-ext/oauth';
05
06// Must use a Dedicated Wallet API Key
07const magic = new Magic('YOUR_API_KEY', {
08  extensions: [new OAuthExtension()],
09});

#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.

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

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