Magic OAuth for Web

Magic OAuth for Web

#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:

  • In your project, run npm install magic-sdk @magic-ext/oauth
  • Create your Magic SDK instance with the OAuth extension:
Javascript
01import { Magic } from 'magic-sdk';
02import { OAuthExtension } from '@magic-ext/oauth';
03
04const magic = new Magic('YOUR_API_KEY', {
05  extensions: [new OAuthExtension()],
06});
  • Start the OAuth 2.0 login flow:
Javascript
01await magic.oauth.loginWithRedirect({
02  provider: '...' /* 'google', 'facebook', 'apple', or 'github' */,
03  redirectURI: 'https://your-app.com/your/oauth/callback',
04  scope: ['user:email'] /* optional */,
05});
  • Upon the redirect back to your application, get the final OAuth 2.0 result:
Typescript
01const result = await magic.oauth.getRedirectResult();
02
03// Result has the following interface
04interface OAuthRedirectResult {
05  oauth: {
06    provider: string;
07    scope: string[];
08    accessToken: string;
09    userHandle: string;
10
11    // `userInfo` contains the OpenID Connect profile information
12    // about the user. The schema of this object should match the
13    // OpenID spec, except that fields are `camelCased` instead
14    // of `snake_cased`.
15    // The presence of some fields may differ depending on the
16    // specific OAuth provider and the user's own privacy settings.
17    // See: https://openid.net/specs/openid-connect-basic-1_0.html#StandardClaims
18
19    userInfo: ...;
20  };
21
22  magic: {
23    idToken: string;
24    userMetadata: MagicUserMetadata;
25  };
26}

Server-side SDKs?

Integrate Magic with your existing backend.

Magic OAuth for Web