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