diff --git a/app/(auth)/sign-in.tsx b/app/(auth)/sign-in.tsx
index e9c23ac..2ef0691 100644
--- a/app/(auth)/sign-in.tsx
+++ b/app/(auth)/sign-in.tsx
@@ -65,7 +65,7 @@ const SignIn = () => {
className="mt-6"
/>
-
+
{
+ const { isLoaded, signUp, setActive } = useSignUp();
+
const [form, setForm] = useState({
name: "",
email: "",
password: "",
});
- const onSignUpPress = async () => {};
+ const [verification, setVerification] = useState({
+ state: "default",
+ error: "",
+ code: "",
+ });
+
+ const onSignUpPress = async () => {
+ if (!isLoaded) return;
+
+ try {
+ await signUp.create({
+ emailAddress: form.email,
+ password: form.password,
+ firstName: form.name,
+ });
+
+ await signUp.prepareEmailAddressVerification({ strategy: "email_code" });
+
+ setVerification((prevVerification) => ({
+ ...prevVerification,
+ state: "pending",
+ }));
+ } catch (err: any) {
+ console.error(JSON.stringify(err, null, 2));
+ }
+ };
+
+ const onPressVerify = async () => {
+ if (!isLoaded) return;
+
+ try {
+ const completeSignUp = await signUp.attemptEmailAddressVerification({
+ code: verification.code,
+ });
+
+ if (completeSignUp.status === "complete") {
+ // TODO: Create a database user
+
+ await setActive({ session: completeSignUp.createdSessionId });
+ setVerification((prevVerification) => ({
+ ...prevVerification,
+ state: "success",
+ }));
+ } else {
+ setVerification((prevVerification) => ({
+ ...prevVerification,
+ error: "Verification failed.",
+ state: "failed",
+ }));
+ console.error(JSON.stringify(completeSignUp, null, 2));
+ }
+ } catch (err: any) {
+ console.error(JSON.stringify(err, null, 2));
+ setVerification((prevVerification) => ({
+ ...prevVerification,
+ error: err?.errors[0]?.longMessage,
+ state: "failed",
+ }));
+ }
+ };
return (
@@ -79,7 +141,7 @@ const SignUp = () => {
className="mt-6"
/>
-
+
{
+ const { user } = useUser();
+
return (
- Home
+
+ Hello {user?.emailAddresses[0].emailAddress}
+
+
+
+ Sign In
+
+
+ Sign Up
+
+
);
};
diff --git a/app/_layout.tsx b/app/_layout.tsx
index e9ca36f..6337b86 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -1,3 +1,4 @@
+import { ClerkProvider, ClerkLoaded } from "@clerk/clerk-expo";
import { useFonts } from "expo-font";
import { Stack } from "expo-router";
import * as SplashScreen from "expo-splash-screen";
@@ -28,12 +29,20 @@ const RootLayout = () => {
return null;
}
+ const publishableKey = process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY!;
+
+ if (!publishableKey) throw new Error("Missing Clerk Publishable Key.");
+
return (
-
-
-
-
-
+
+
+
+
+
+
+
+
+
);
};
diff --git a/app/index.tsx b/app/index.tsx
index 177abaa..9bfbb92 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -1,6 +1,11 @@
+import { useAuth } from "@clerk/clerk-expo";
import { Redirect } from "expo-router";
const App = () => {
+ const { isSignedIn } = useAuth();
+
+ if (isSignedIn) return ;
+
return ;
};
diff --git a/components/oauth.tsx b/components/oauth.tsx
index f7e65ab..c07b184 100644
--- a/components/oauth.tsx
+++ b/components/oauth.tsx
@@ -4,7 +4,11 @@ import { icons } from "@/constants";
import { CustomButton } from "./custom-button";
-export const OAuth = () => {
+type OAuthProps = {
+ title: string;
+};
+
+export const OAuth = ({ title }: OAuthProps) => {
const handleGoogleSignIn = () => {};
return (
@@ -18,7 +22,7 @@ export const OAuth = () => {
(
Promise;
+ saveToken: (key: string, token: string) => Promise;
+ clearToken?: (key: string) => void;
+}
+
+export const tokenCache = {
+ async getToken(key: string) {
+ try {
+ const item = await SecureStore.getItemAsync(key);
+ if (item) {
+ console.log(`${key} was used 🔐 \n`);
+ } else {
+ console.log("No values stored under key: " + key);
+ }
+ return item;
+ } catch (error) {
+ console.error("SecureStore get item error: ", error);
+ await SecureStore.deleteItemAsync(key);
+ return null;
+ }
+ },
+ async saveToken(key: string, value: string) {
+ try {
+ return SecureStore.setItemAsync(key, value);
+ } catch (err) {
+ console.error("TOKEN_CACHE: ", err);
+
+ return;
+ }
+ },
+};