Created
April 29, 2021 14:32
-
-
Save franko4don/1f86cecb4ff89d171b4072797e0ea6d0 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, {Component, useEffect, useState} from 'react'; | |
| import {getAllCountries} from 'react-native-country-picker-modal' | |
| import { useDispatch, useSelector } from 'react-redux'; | |
| import { generalAction } from 'redux/actions/GeneralAction'; | |
| import LoginScreen from 'components/Screens/Auth/Login'; | |
| import PhonNumberModal from 'components/Screens/Auth/PhoneNumberModal'; | |
| import { GoogleSignin, statusCodes } from '@react-native-community/google-signin'; | |
| import { appleAuth, appleAuthAndroid } from '@invertase/react-native-apple-authentication'; | |
| import { isAndroid, randomString, toast } from 'helpers/Helper'; | |
| import enums from 'config/enums'; | |
| import { StatusBar } from 'react-native'; | |
| import colors from 'style/colors'; | |
| import { authAction } from 'redux/actions/AuthAction'; | |
| import parsePhoneNumber from 'libphonenumber-js'; | |
| export default function Login({}){ | |
| const [modalVisible, setModalVisible] = useState(false); | |
| const [phoneNumber, setPhoneNumber] = useState(''); | |
| const {countryCode} = useSelector(state => state.general); | |
| const {authLoading} = useSelector(state => state.loading); | |
| const dispatch = useDispatch(); | |
| let data = { | |
| "email": "", | |
| "phoneNo": "", | |
| "callingCode": "", | |
| "provider": "", | |
| "idToken": "" | |
| } | |
| useEffect(() => { | |
| dispatch(generalAction.updateCountry(getAllCountries())) | |
| GoogleSignin.configure({ | |
| webClientId: '486521562145-9iok7lfcjd3jj0vf03g04m1g4gf4nitq.apps.googleusercontent.com', // client ID of type WEB for your server (needed to verify user ID and offline access) | |
| iosClientId: '486521562145-4otqpg44d1ubklmp77cgpphmlt55ods6.apps.googleusercontent.com', | |
| offlineAccess: true, // if you want to access Google API on behalf of the user FROM YOUR SERVER | |
| hostedDomain: '', // specifies a hosted domain restriction | |
| forceConsentPrompt: true, // [Android] if you want to show the authorization prompt at each login | |
| accountName: '', // [Android] specifies an account name on the device that should be used | |
| }); | |
| GoogleSignin.signOut(); | |
| }, []) | |
| const signInWithGoogle = async () => { | |
| try { | |
| const hasPlayServices = await GoogleSignin.hasPlayServices(); | |
| const userInfo = await GoogleSignin.signIn(); | |
| const {idToken, user} = userInfo; | |
| data.idToken = idToken; | |
| data.email = user.email; | |
| data.callingCode = countryCode; | |
| data.provider = enums.GOOGLE | |
| dispatch(authAction.authDataUpdate(data)); | |
| dispatch(authAction.authenticate(data)); | |
| } catch (error) { | |
| if (error.code === statusCodes.SIGN_IN_CANCELLED) { | |
| // toast({text: 'User cancelled'}) | |
| } else if (error.code === statusCodes.IN_PROGRESS) { | |
| toast({text: 'Signin in progress'}) | |
| } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) { | |
| toast({text: 'Play services not available'}) | |
| } else { | |
| toast({text: 'Something went wrong'}) | |
| } | |
| } | |
| } | |
| const signInWithApple = () => { | |
| if(isAndroid()){ | |
| signInWithAppleAndroid(); | |
| }else{ | |
| signInWithAppleIOS(); | |
| } | |
| } | |
| const signInWithAppleAndroid = async() => { | |
| // Configure the request | |
| appleAuthAndroid.configure({ | |
| clientId: 'com.xend', | |
| redirectUri: 'https://xend.africa/appleauth', | |
| responseType: appleAuthAndroid.ResponseType.ALL, | |
| scope: appleAuthAndroid.Scope.ALL, | |
| nonce: randomString(), | |
| }); | |
| try{ | |
| const response = await appleAuthAndroid.signIn(); | |
| const {id_token: idToken, } = response; | |
| data.idToken = idToken; | |
| data.callingCode = countryCode; | |
| data.provider = enums.APPLE; | |
| dispatch(authAction.authDataUpdate(data)); | |
| dispatch(authAction.authenticate(data)); | |
| }catch(error){ | |
| console.log(error); | |
| } | |
| } | |
| const signInWithAppleIOS = async() => { | |
| try{ | |
| const appleAuthRequestResponse = await appleAuth.performRequest({ | |
| requestedOperation: appleAuth.Operation.LOGIN, | |
| requestedScopes: [appleAuth.Scope.EMAIL, appleAuth.Scope.FULL_NAME], | |
| }); | |
| // get current authentication state for user | |
| // /!\ This method must be tested on a real device. On the iOS simulator it always throws an error. | |
| const credentialState = await appleAuth.getCredentialStateForUser(appleAuthRequestResponse.user); | |
| console.log(appleAuthRequestResponse, credentialState); | |
| // use credentialState response to ensure the user is authenticated | |
| if (credentialState === appleAuth.State.AUTHORIZED) { | |
| // user is authenticated | |
| const {identityToken: idToken, nonce} = appleAuthRequestResponse; | |
| data.idToken = idToken; | |
| data.callingCode = countryCode; | |
| data.nonce = nonce; | |
| data.provider = enums.APPLE; | |
| dispatch(authAction.authDataUpdate(data)); | |
| dispatch(authAction.authenticate(data)); | |
| } | |
| }catch(error){ | |
| console.log(error); | |
| } | |
| } | |
| const signInWithPhoneNumber = () => { | |
| setModalVisible(true); | |
| } | |
| const submitPhoneNumber = () => { | |
| try{ | |
| let phone = parsePhoneNumber(countryCode+phoneNumber); | |
| if(!phone.isValid()){ | |
| throw new Error('Invalid Phone Number') | |
| } | |
| data.callingCode = countryCode.replace('+', ''); | |
| data.provider = enums.PHONENUMBER; | |
| data.phoneNo = phone.nationalNumber; | |
| dispatch(authAction.phoneStatus(data)); | |
| dispatch(authAction.authDataUpdate(data)); | |
| setModalVisible(false); | |
| }catch(error){ | |
| toast({text: error.message}); | |
| } | |
| } | |
| return ( | |
| <> | |
| <StatusBar barStyle={'dark-content'} backgroundColor={colors.WHITE} /> | |
| <LoginScreen | |
| signInWithGoogle={() => signInWithGoogle()} | |
| signInWithApple={() => signInWithApple()} | |
| signInWithPhoneNumber={() => signInWithPhoneNumber()} | |
| loading={authLoading} | |
| /> | |
| <PhonNumberModal | |
| onSubmit={() => submitPhoneNumber()} | |
| phoneNumber={phoneNumber} | |
| onChangeText={(value) => setPhoneNumber(value)} | |
| modalVisible={modalVisible} | |
| loading={authLoading} | |
| setModalVisible={() => setModalVisible(false)} | |
| /> | |
| </> | |
| ); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment