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