​
Overview

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

​
Compatibility

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 install magic-sdk @magic-ext/oauth2
# or
npm 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:
JavaScript
import { Magic } from 'magic-sdk';

import { OAuthExtension } from '@magic-ext/oauth2';
// or
import { OAuthExtension } from '@magic-ext/oauth';

const magic = new Magic('YOUR_API_KEY', {
  extensions: [new OAuthExtension()],
});

​
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
const beginOAuthFlow = () => {
  // if v1, use oauth module
  await magic.oauth2.loginWithRedirect({ //
    provider: '...' /* 'google', 'facebook', 'apple', or 'github'   */,
    redirectURI: 'https://your-app.com/your/oauth/callback',
    scope: ['user:email'] /* optional */,
  });
}

// Call this upon redirect back to application
const handleOAuthResult = () => {
  // if v1, use oauth module
  const result = await magic.oauth2.getRedirectResult();
  console.log(`OAuth result: ${result}`);

  // Handle result information as needed
}
The interface for the result of getRedirectResult is as follows: 
interface OAuthRedirectResult {
  magic: {
    idToken: string;
    userMetadata: MagicUserMetadata;
  },
  oauth: {
    provider: string;
    scope: string[];
    accessToken: string;
    userHandle: string;
    userInfo: ...;
  }
};

​
Resources