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;

   };

   }