Social Login (OAuth2) - RN

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: 'testapp://demo/your/oauth/callback',

   scope: ['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;

   };

   }

App linking guide: Expo Linking