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
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:
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:
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.
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:
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};