Created
March 8, 2023 17:50
-
-
Save fddayan/35a296b4d2d9a1579573d5da132ab8f5 to your computer and use it in GitHub Desktop.
This file contains 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 from "react"; | |
| import { Text, TouchableOpacity } from "react-native"; | |
| import { useSignUp } from "@clerk/clerk-expo"; | |
| import { log } from "./logger"; | |
| import { styles } from "./Styles"; | |
| import * as AuthSession from "expo-auth-session"; | |
| function SignUpWithOauth() { | |
| const { signUp, setSession, isLoaded } = useSignUp(); | |
| const onPress = React.useCallback(async () => { | |
| if (!isLoaded) { | |
| return; | |
| } | |
| try { | |
| // Create a redirect url for the current platform and environment. | |
| // | |
| // This redirect URL needs to be whitelisted for your instance via | |
| // https://clerk.dev/docs/reference/backend-api/tag/Redirect-URLs | |
| // | |
| // For more information go to: | |
| // https://docs.expo.dev/versions/latest/sdk/auth-session/#authsessionmakeredirecturi | |
| const redirectUrl = AuthSession.makeRedirectUri({ | |
| path: "/oauth-native-callback", | |
| }); | |
| await signUp.create({ | |
| strategy: "oauth_google", | |
| redirectUrl, | |
| }); | |
| const { | |
| verifications: { | |
| externalAccount: { externalVerificationRedirectURL }, | |
| }, | |
| } = signUp; | |
| const result = await AuthSession.startAsync({ | |
| authUrl: externalVerificationRedirectURL!.toString(), | |
| returnUrl: redirectUrl, | |
| }); | |
| // @ts-ignore | |
| const { type, params } = result || {}; | |
| // Check all the possible AuthSession results | |
| // https://docs.expo.dev/versions/latest/sdk/auth-session/#returns-7 | |
| if (type !== "success") { | |
| throw "Something went wrong during the OAuth flow. Try again."; | |
| } | |
| // Get the rotatingTokenNonce from the redirect URL parameters | |
| const { rotating_token_nonce: rotatingTokenNonce } = params; | |
| // Use it once to reload the complete sign up object | |
| await signUp.reload({ rotatingTokenNonce }); | |
| const { createdSessionId } = signUp; | |
| if (!createdSessionId) { | |
| throw "Something went wrong during the Sign up OAuth flow. Please ensure that all sign up requirements are met."; | |
| } | |
| await setSession(createdSessionId); | |
| return; | |
| } catch (err: any) { | |
| log(err); | |
| log("Error:> " + err?.status || ''); | |
| log("Error:> " + err?.errors ? JSON.stringify(err.errors) : err); | |
| } | |
| }, []); | |
| return ( | |
| <TouchableOpacity | |
| style={{ ...styles.secondaryButton, marginBottom: 20 }} | |
| onPress={onPress} | |
| > | |
| <Text style={styles.secondaryButtonText}>Sign up with Google</Text> | |
| </TouchableOpacity> | |
| ); | |
| } | |
| export default SignUpWithOauth; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment