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/react-native @magic-ext/react-native-oauth

  2. Create your Magic SDK instance with the OAuth extension:

    import { Magic } from '@magic-sdk/react-native';
    import { OAuthExtension } from '@magic-ext/react-native-oauth';
    const magic = new Magic('YOUR_API_KEY', {
    extensions: [new OAuthExtension()],
    });
  3. Start the OAuth 2.0 login flow:

    const result = await magic.oauth.loginWithPopup({
    provider: '...' /* 'google', 'facebook', 'apple', or 'github' */,
    redirectURI: 'https://your-app.com/your/oauth/callback',
    scopes: ['user:email'], /* optional */
    });
    // 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;
    };
    }