Merge pull request #20 from t3dotgg/main

Clean up mobile clerk integration, fix type errors

Author: perkinsjr

apps/expo/src/_app.tsx

@@ -7,13 +7,11 @@ import { HomeScreen } from "./screens/home";
 import { SignInSignUpScreen } from "./screens/signin";
 import { ClerkProvider, SignedIn, SignedOut } from "@clerk/clerk-expo";
 import { tokenCache } from "./utils/cache";
-
-// Find this in your Dashboard.
-const clerk_frontend_api = "YOUR_CLERK_FRONTEND_API";
+import { CLERK_FRONTEND_API } from "./constants";
 
 export const App = () => {
   return (
-    <ClerkProvider frontendApi={clerk_frontend_api} tokenCache={tokenCache}>
+    <ClerkProvider frontendApi={CLERK_FRONTEND_API} tokenCache={tokenCache}>
       <SignedIn>
         <TRPCProvider>
           <SafeAreaProvider>

apps/expo/src/components/SignInWithOAuth.tsx

@@ -24,50 +24,50 @@ const SignInWithOAuth = () => {
         firstFactorVerification: { externalVerificationRedirectURL },
       } = signIn;
 
-      const result = await AuthSession.startAsync({
+      if (!externalVerificationRedirectURL)
+        throw "Something went wrong during the OAuth flow. Try again.";
+
+      const authResult = await AuthSession.startAsync({
         authUrl: externalVerificationRedirectURL.toString(),
         returnUrl: redirectUrl,
       });
 
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      const { type, params } = result || {};
-
-      if (type !== "success") {
+      if (authResult.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;
+      const { rotating_token_nonce: rotatingTokenNonce } = authResult.params;
 
       await signIn.reload({ rotatingTokenNonce });
 
       const { createdSessionId } = signIn;
 
-      if (!createdSessionId) {
-        if (signIn.firstFactorVerification.status === "transferable") {
-          console.log("Didn't have an account transferring");
-
-          await signUp.create({ transfer: true });
-
-          const { rotating_token_nonce: rotatingTokenNonce } = params;
-
-          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;
+      if (createdSessionId) {
+        // If we have a createdSessionId, then auth was successful
+        await setSession(createdSessionId);
+      } else {
+        // If we have no createdSessionId, then this is a first time sign-in, so
+        // we should process this as a signUp instead
+        // Throw if we're not in the right state for creating a new user
+        if (
+          !signUp ||
+          signIn.firstFactorVerification.status !== "transferable"
+        ) {
+          throw "Something went wrong during the Sign up OAuth flow. Please ensure that all sign up requirements are met.";
         }
-        throw "Something went wrong during the Sign in OAuth flow. Please ensure that all sign in requirements are met.";
-      }
 
-      await setSession(createdSessionId);
+        console.log(
+          "Didn't have an account transferring, following through with new account sign up",
+        );
 
-      return;
+        // Create user
+        await signUp.create({ transfer: true });
+        await signUp.reload({
+          rotatingTokenNonce: authResult.params.rotating_token_nonce,
+        });
+        await setSession(signUp.createdSessionId);
+      }
     } catch (err) {
       console.log(JSON.stringify(err, null, 2));
       console.log("error signing in", err);

apps/expo/src/constants.ts

@@ -0,0 +1,17 @@
+/**
+ * URL key for the Clerk auth API. You can find this in your Clerk dashboard:
+ * https://dashboard.clerk.dev
+ *
+ * NOTE: we recommend putting the frontend api key here instead of in your .env
+ * files for two reasons:
+ * 1. It's okay for this to be "public" (CLERK_API_KEY and CLERK_JWT_KEY should
+ *    NEVER be public)
+ * 2. Parsing the .env file in Metro/Expo runs the risk of including the
+ *    variables above that we don't want (and it's obnoxious to do right as a
+ *    result)
+ */
+export const CLERK_FRONTEND_API = "";
+
+if (CLERK_FRONTEND_API === "") {
+  throw new Error("CLERK_FRONTEND_API is not defined");
+}

apps/expo/src/utils/trpc.tsx

@@ -45,7 +45,7 @@ export const TRPCProvider: React.FC<{
           async headers() {
             const authToken = await getToken();
             return {
-              Authorization: authToken,
+              Authorization: authToken ?? undefined,
             };
           },
           url: `${getBaseUrl()}/api/trpc`,