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, run npm install @magic-sdk/react-native @magic-ext/react-native-oauth
  • 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()],
});
  • 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

Server-side SDKs?

Integrate Magic with your existing backend.

Did you find what you were looking for?

Magic OAuth for React Native

Did you find what you were looking for?