Social Login (OAuth2)

Installation

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:

  1. In your project, run npm install magic-sdk @magic-ext/oauth

  2. 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()],
    });
  3. Start the OAuth 2.0 login flow:

    await magic.oauth.loginWithRedirect({
    provider: '...' /* 'google', 'facebook', 'apple', or 'github' */,
    redirectURI: 'https://your-app.com/your/oauth/callback',
    scopes: ['user:email'], /* optional */
    });
  4. 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: https://openid.net/specs/openid-connect-basic-1_0.html#StandardClaims
    userInfo: ...;
    };
    magic: {
    idToken: string;
    userMetadata: MagicUserMetadata;
    };
    }