How to Add OAuth2 Social Login on Web with Magic

How to Add OAuth2 Social Login on Web with Magic

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()], });
  1. 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', scope: ['user:email'] /* optional */, });
  1. 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; }; }
How to Add OAuth2 Social Login on Web with Magic