muerwre.github.io/content/Frontend/React Native/OAuth2 login.md
2022-11-03 10:38:11 +06:00

1.6 KiB

Use #oauth2 login with React-Native

Common OAuth2 providers

Can be handled by react-native-app-auth by redirecting to url com.yourapp://oauth2provider.

Example for #Google

import { authorize } from 'react-native-app-auth';

const GOOGLE_OAUTH_CLIENT = '...';

// ...
const authState = await authorize({
  issuer: 'https://accounts.google.com',
  clientId: `${GOOGLE_OAUTH_CLIENT}.apps.googleusercontent.com`,
  redirectUrl: `com.yourapp:/oauth2redirect/google`,
  scopes: ['openid', 'profile'],
  dangerouslyAllowInsecureHttpRequests: true,
});

Example for #Yandex

const YANDEX_OAUTH_CLIENT = '...';
const YANDEX_OAUTH_SECRET = '...'; // better hide it somehow
const APP_ID = 'com.yourapp';

const authState = await authorize({
  serviceConfiguration: {
    authorizationEndpoint: `https://oauth.yandex.ru/authorize?response_type=code&client_id=${YANDEX_OAUTH_CLIENT}&redirect_uri=${APP_ID}:/oauth2redirect`,
    // TODO: replace it with your own backend to secure client_secret:
    tokenEndpoint: `https://oauth.yandex.ru/token?grant_type=authorization_code&client_id=${YANDEX_OAUTH_CLIENT}&client_secret=${YANDEX_OAUTH_SECRET}`,
  },
  clientId: YANDEX_OAUTH_CLIENT,
  redirectUrl: `${APP_ID}:/oauth2redirect`,
  scopes: ['login:info', 'login:avatar'],
  dangerouslyAllowInsecureHttpRequests: true,
});

callback(authState.accessToken);

Apple ID login

react-native-apple-authentication has its own documentation on setting up OAuth using Apple ID.