How to Add OAuth2 Social Login in React Native with Magic

How to Add OAuth2 Social Login in React Native 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/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()], });
  1. 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

How to Add OAuth2 Social Login in React Native with Magic