Magic OAuth for Web

Magic OAuth for Web


Social Logins work as an extension to Magic SDK. To add Social Login to your Magic integration, follow these steps to install the OAuth Extension:

  • In your project, run npm install magic-sdk @magic-ext/oauth
  • Create your Magic SDK instance with the OAuth extension:
import { Magic } from 'magic-sdk';
import { OAuthExtension } from '@magic-ext/oauth';

const magic = new Magic('YOUR_API_KEY', {
  extensions: [new OAuthExtension()],
  • Start the OAuth 2.0 login flow:
await magic.oauth.loginWithRedirect({
  provider: '...' /* 'google', 'facebook', 'apple', or 'github' */,
  redirectURI: '',
  scope: ['user:email'] /* optional */,
  • Upon the redirect back to your application, get the final OAuth 2.0 result:
const result = await magic.oauth.getRedirectResult();

// Result has the following interface
interface OAuthRedirectResult {
  oauth: {
    provider: string;
    scope: string[];
    accessToken: string;
    userHandle: string;

    // `userInfo` contains the OpenID Connect profile information
    // about the user. The schema of this object should match the
    // OpenID spec, except that fields are `camelCased` instead
    // of `snake_cased`.
    // The presence of some fields may differ depending on the
    // specific OAuth provider and the user's own privacy settings.
    // See:

    userInfo: ...;

  magic: {
    idToken: string;
    userMetadata: MagicUserMetadata;

Server-side SDKs?

Integrate Magic with your existing backend.

Magic OAuth for Web