Magic OAuth for React Native
Magic OAuth for React Native
#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, install the package with the required peer dependencies:
Bash
01
02# Bare React Native
03npm install @magic-sdk/react-native-bare @magic-ext/react-native-bare-oauth react-native-inappbrowser-reborn # NPM
04yarn add @magic-sdk/react-native-bare @magic-ext/react-native-bare-oauth react-native-inappbrowser-reborn # Yarn
05
06# Expo React Native
07npm install @magic-sdk/react-native-expo @magic-ext/react-native-expo-oauth # NPM
08yarn add @magic-sdk/react-native-expo @magic-ext/react-native-expo-oauth # Yarn
- Create your Magic SDK instance with the OAuth extension:
Typescript
01# Bare React Native
02import { Magic } from '@magic-sdk/react-native-bare';
03import { OAuthExtension } from '@magic-ext/react-native-bare-oauth';
04
05# Expo React Native
06import { Magic } from '@magic-sdk/react-native-expo';
07import { OAuthExtension } from '@magic-ext/react-native-expo-oauth';
08
09const magic = new Magic('YOUR_API_KEY', {
10 extensions: [new OAuthExtension()],
11});
- Start the OAuth 2.0 login flow:
Typescript
01const result = await magic.oauth.loginWithPopup({
02 provider: '...' /* 'google', 'facebook', 'apple', or 'github' */,
03 redirectURI: 'testapp://demo/your/oauth/callback', /* must be string */
04 scope: ['user:email'], /* optional */
05});
06
07// Result has the following interface
08interface OAuthRedirectResult {
09 oauth: {
10 provider: string;
11 scope: string[];
12 accessToken: string;
13 userHandle: string;
14
15 // `userInfo` contains the OpenID Connect profile information
16 // about the user. The schema of this object should match the
17 // OpenID spec, except that fields are `camelCased` instead
18 // of `snake_cased`.
19 // The presence of some fields may differ depending on the
20 // specific OAuth provider and the user's own privacy settings.
21 // See: https://openid.net/specs/openid-connect-basic-1_0.html#StandardClaims
22
23 userInfo: ...;
24 };
25
26 magic: {
27 idToken: string;
28 userMetadata: MagicUserMetadata;
29 };
30}
👉 App linking guide for Expo setups: Expo Linking
