-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
update dependencies; align code with quickstart
- Loading branch information
1 parent
4bd5864
commit 696e458
Showing
7 changed files
with
1,235 additions
and
3,341 deletions.
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,2 @@ | ||
| EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY= | ||
| # Visit https://dashboard.clerk.com to find your API Keys | ||
| EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY= |
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,90 +1,102 @@ | ||
| import * as React from "react"; | ||
| import { TextInput, Button, View } from "react-native"; | ||
| import { useSignUp } from "@clerk/clerk-expo"; | ||
| import { useRouter } from "expo-router"; | ||
| import * as React from 'react'; | ||
| import { Text, TextInput, Button, View } from 'react-native'; | ||
| import { useSignUp } from '@clerk/clerk-expo'; | ||
| import { useRouter } from 'expo-router'; | ||
|
|
||
| export default function SignUpScreen() { | ||
| const { isLoaded, signUp, setActive } = useSignUp(); | ||
| const router = useRouter(); | ||
|
|
||
| const [emailAddress, setEmailAddress] = React.useState(""); | ||
| const [password, setPassword] = React.useState(""); | ||
| const [emailAddress, setEmailAddress] = React.useState(''); | ||
| const [password, setPassword] = React.useState(''); | ||
| const [pendingVerification, setPendingVerification] = React.useState(false); | ||
| const [code, setCode] = React.useState(""); | ||
| const [code, setCode] = React.useState(''); | ||
|
|
||
| // Handle submission of sign-up form | ||
| const onSignUpPress = async () => { | ||
| if (!isLoaded) { | ||
| return; | ||
| } | ||
| if (!isLoaded) return; | ||
|
|
||
| console.log(emailAddress, password); | ||
|
|
||
| // Start sign-up process using email and password provided | ||
| try { | ||
| await signUp.create({ | ||
| emailAddress, | ||
| password, | ||
| }); | ||
|
|
||
| await signUp.prepareEmailAddressVerification({ strategy: "email_code" }); | ||
| // Send user an email with verification code | ||
| await signUp.prepareEmailAddressVerification({ strategy: 'email_code' }); | ||
|
|
||
| // Set 'pendingVerification' to true to display second form | ||
| // and capture OTP code | ||
| setPendingVerification(true); | ||
| } catch (err: any) { | ||
| } catch (err) { | ||
| // See https://clerk.com/docs/custom-flows/error-handling | ||
| // for more info on error handling | ||
| console.error(JSON.stringify(err, null, 2)); | ||
| } | ||
| }; | ||
|
|
||
| const onPressVerify = async () => { | ||
| if (!isLoaded) { | ||
| return; | ||
| } | ||
| // Handle submission of verification form | ||
| const onVerifyPress = async () => { | ||
| if (!isLoaded) return; | ||
|
|
||
| try { | ||
| const completeSignUp = await signUp.attemptEmailAddressVerification({ | ||
| // Use the code the user provided to attempt verification | ||
| const signUpAttempt = await signUp.attemptEmailAddressVerification({ | ||
| code, | ||
| }); | ||
|
|
||
| if (completeSignUp.status === "complete") { | ||
| await setActive({ session: completeSignUp.createdSessionId }); | ||
| router.replace("/"); | ||
| // If verification was completed, set the session to active | ||
| // and redirect the user | ||
| if (signUpAttempt.status === 'complete') { | ||
| await setActive({ session: signUpAttempt.createdSessionId }); | ||
| router.replace('/'); | ||
| } else { | ||
| console.error(JSON.stringify(completeSignUp, null, 2)); | ||
| // If the status is not complete, check why. User may need to | ||
| // complete further steps. | ||
| console.error(JSON.stringify(signUpAttempt, null, 2)); | ||
| } | ||
| } catch (err: any) { | ||
| } catch (err) { | ||
| // See https://clerk.com/docs/custom-flows/error-handling | ||
| // for more info on error handling | ||
| console.error(JSON.stringify(err, null, 2)); | ||
| } | ||
| }; | ||
|
|
||
| if (pendingVerification) { | ||
| return ( | ||
| <> | ||
| <Text>Verify your email</Text> | ||
| <TextInput | ||
| value={code} | ||
| placeholder="Enter your verification code" | ||
| onChangeText={(code) => setCode(code)} | ||
| /> | ||
| <Button title="Verify" onPress={onVerifyPress} /> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <View> | ||
| {!pendingVerification && ( | ||
| <> | ||
| <TextInput | ||
| autoCapitalize="none" | ||
| value={emailAddress} | ||
| placeholder="Email..." | ||
| onChangeText={(email) => setEmailAddress(email)} | ||
| /> | ||
| <TextInput | ||
| value={password} | ||
| placeholder="Password..." | ||
| secureTextEntry={true} | ||
| onChangeText={(password) => setPassword(password)} | ||
| /> | ||
| <Button title="Sign Up" onPress={onSignUpPress} /> | ||
| </> | ||
| )} | ||
| {pendingVerification && ( | ||
| <> | ||
| <TextInput | ||
| value={code} | ||
| placeholder="Code..." | ||
| onChangeText={(code) => setCode(code)} | ||
| /> | ||
| <Button title="Verify Email" onPress={onPressVerify} /> | ||
| </> | ||
| )} | ||
| <> | ||
| <Text>Sign up</Text> | ||
| <TextInput | ||
| autoCapitalize="none" | ||
| value={emailAddress} | ||
| placeholder="Enter email" | ||
| onChangeText={(email) => setEmailAddress(email)} | ||
| /> | ||
| <TextInput | ||
| value={password} | ||
| placeholder="Enter password" | ||
| secureTextEntry={true} | ||
| onChangeText={(password) => setPassword(password)} | ||
| /> | ||
| <Button title="Continue" onPress={onSignUpPress} /> | ||
| </> | ||
| </View> | ||
| ); | ||
| } |
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
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
Oops, something went wrong.