From 267720fe94ca342d38985079d3c84bdad47933cb Mon Sep 17 00:00:00 2001
From: juliusmarminge <julius0216@outlook.com>
Date: Thu, 2 Nov 2023 01:40:54 +0100
Subject: [PATCH] feat: expo auth

---
 apps/expo/package.json                        |  2 +
 apps/expo/src/app/index.tsx                   | 14 ++++
 apps/expo/src/utils/api.tsx                   |  8 ++-
 apps/expo/src/utils/auth-hooks.tsx            | 48 +++++++++++++
 apps/expo/src/utils/session-store.ts          |  6 ++
 .../src/app/api/auth/[...nextauth]/route.ts   | 47 +++++++++++-
 packages/api/src/router/auth.ts               |  9 +++
 packages/api/src/trpc.ts                      | 13 ++--
 packages/auth/index.ts                        | 23 +++++-
 pnpm-lock.yaml                                | 71 +++++++++++++++++++
 10 files changed, 233 insertions(+), 8 deletions(-)
 create mode 100644 apps/expo/src/utils/auth-hooks.tsx
 create mode 100644 apps/expo/src/utils/session-store.ts

diff --git a/apps/expo/package.json b/apps/expo/package.json
index 1db92aa615..f7598aa1dc 100644
--- a/apps/expo/package.json
+++ b/apps/expo/package.json
@@ -25,8 +25,10 @@
     "expo-constants": "~14.4.2",
     "expo-linking": "~5.0.2",
     "expo-router": "2.0.10",
+    "expo-secure-store": "^12.5.0",
     "expo-splash-screen": "~0.22.0",
     "expo-status-bar": "~1.7.1",
+    "expo-web-browser": "^12.5.0",
     "nativewind": "^4.0.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
diff --git a/apps/expo/src/app/index.tsx b/apps/expo/src/app/index.tsx
index d67633129b..ff867c8792 100644
--- a/apps/expo/src/app/index.tsx
+++ b/apps/expo/src/app/index.tsx
@@ -13,6 +13,7 @@ import { FlashList } from "@shopify/flash-list";
 
 import { api } from "~/utils/api";
 import type { RouterOutputs } from "~/utils/api";
+import { useSignIn, useSignOut, useUser } from "~/utils/auth-hooks";
 
 function PostCard(props: {
   post: RouterOutputs["post"]["all"][number];
@@ -108,6 +109,10 @@ const Index = () => {
 
   const postQuery = api.post.all.useQuery();
 
+  const user = useUser();
+  const signIn = useSignIn();
+  const signOut = useSignOut();
+
   const deletePostMutation = api.post.delete.useMutation({
     onSettled: () => utils.post.all.invalidate(),
   });
@@ -127,6 +132,15 @@ const Index = () => {
           color={"#f472b6"}
         />
 
+        <Text className="pb-2 text-center text-xl font-semibold text-white">
+          {user?.name ?? "Not logged in"}
+        </Text>
+        <Button
+          onPress={() => (user ? signOut() : signIn())}
+          title={user ? "Sign Out" : "Sign In With Discord"}
+          color={"#5B65E9"}
+        />
+
         <View className="py-2">
           <Text className="font-semibold italic text-white">
             Press on a post
diff --git a/apps/expo/src/utils/api.tsx b/apps/expo/src/utils/api.tsx
index 33f5cba1df..3d00fa9bc6 100644
--- a/apps/expo/src/utils/api.tsx
+++ b/apps/expo/src/utils/api.tsx
@@ -7,6 +7,8 @@ import superjson from "superjson";
 
 import type { AppRouter } from "@acme/api";
 
+import { getToken } from "./session-store";
+
 /**
  * A set of typesafe hooks for consuming your API.
  */
@@ -52,9 +54,13 @@ export function TRPCProvider(props: { children: React.ReactNode }) {
       links: [
         httpBatchLink({
           url: `${getBaseUrl()}/api/trpc`,
-          headers() {
+          headers: async () => {
             const headers = new Map<string, string>();
             headers.set("x-trpc-source", "expo-react");
+
+            const token = await getToken();
+            if (token) headers.set("Authorization", `Bearer ${token}`);
+
             return Object.fromEntries(headers);
           },
         }),
diff --git a/apps/expo/src/utils/auth-hooks.tsx b/apps/expo/src/utils/auth-hooks.tsx
new file mode 100644
index 0000000000..ce3d078ce2
--- /dev/null
+++ b/apps/expo/src/utils/auth-hooks.tsx
@@ -0,0 +1,48 @@
+import * as Linking from "expo-linking";
+import * as Browser from "expo-web-browser";
+
+import { api } from "./api";
+import { deleteToken, setToken } from "./session-store";
+
+export const signIn = async () => {
+  const signInUrl = "http://localhost:3000/api/auth/signin";
+  const redirectTo = "exp://192.168.10.181:8081/login";
+  const result = await Browser.openAuthSessionAsync(
+    `${signInUrl}?expo-redirect=${encodeURIComponent(redirectTo)}`,
+    redirectTo,
+  );
+  if (result.type !== "success") return;
+
+  const url = Linking.parse(result.url);
+  const sessionToken = String(url.queryParams?.session_token);
+  if (!sessionToken) return;
+
+  await setToken(sessionToken);
+  // ...
+};
+
+export const useUser = () => {
+  const { data: session } = api.auth.getSession.useQuery();
+  return session?.user ?? null;
+};
+
+export const useSignIn = () => {
+  const utils = api.useUtils();
+
+  return async () => {
+    await signIn();
+    await utils.invalidate();
+  };
+};
+
+export const useSignOut = () => {
+  const utils = api.useUtils();
+  const signOut = api.auth.signOut.useMutation();
+
+  return async () => {
+    const res = await signOut.mutateAsync();
+    if (!res.success) return;
+    await deleteToken();
+    await utils.invalidate();
+  };
+};
diff --git a/apps/expo/src/utils/session-store.ts b/apps/expo/src/utils/session-store.ts
new file mode 100644
index 0000000000..027986ee80
--- /dev/null
+++ b/apps/expo/src/utils/session-store.ts
@@ -0,0 +1,6 @@
+import * as SecureStore from "expo-secure-store";
+
+const key = "session_token";
+export const getToken = () => SecureStore.getItemAsync(key);
+export const deleteToken = () => SecureStore.deleteItemAsync(key);
+export const setToken = (v: string) => SecureStore.setItemAsync(key, v);
diff --git a/apps/nextjs/src/app/api/auth/[...nextauth]/route.ts b/apps/nextjs/src/app/api/auth/[...nextauth]/route.ts
index 16c8300c38..ebba47a2cd 100644
--- a/apps/nextjs/src/app/api/auth/[...nextauth]/route.ts
+++ b/apps/nextjs/src/app/api/auth/[...nextauth]/route.ts
@@ -1,3 +1,48 @@
-export { GET, POST } from "@acme/auth";
+import { cookies } from "next/headers";
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
+
+import { GET as _GET, POST } from "@acme/auth";
 
 export const runtime = "edge";
+
+const expoRedirectCookieName = "__acme-expo-redirect-state";
+const setCookieMatchPattern = /next-auth\.session-token=([^;]+)/;
+
+export const GET = async (
+  req: NextRequest,
+  props: { params: { nextauth: string[] } },
+) => {
+  const nextauthAction = props.params.nextauth[0];
+  const isExpoSignIn = req.nextUrl.searchParams.get("expo-redirect");
+  const isExpoCallback = cookies().get(expoRedirectCookieName);
+
+  if (nextauthAction === "signin" && !!isExpoSignIn) {
+    // set a cookie we can read in the callback
+    // to know to send the user back to expo
+    cookies().set({
+      name: expoRedirectCookieName,
+      value: isExpoSignIn,
+      maxAge: 60 * 10, // 10 min
+      path: "/",
+    });
+  }
+
+  if (nextauthAction === "callback" && !!isExpoCallback) {
+    cookies().delete(expoRedirectCookieName);
+
+    const authResponse = await _GET(req);
+    const setCookie = authResponse.headers.getSetCookie()[0];
+    const match = setCookie?.match(setCookieMatchPattern)?.[1];
+    if (!match) throw new Error("No session cookie found");
+
+    const url = new URL(isExpoCallback.value);
+    url.searchParams.set("session_token", match);
+    return NextResponse.redirect(url);
+  }
+
+  // Every other request just calls the default handler
+  return _GET(req);
+};
+
+export { POST };
diff --git a/packages/api/src/router/auth.ts b/packages/api/src/router/auth.ts
index 105b4eae14..9099db3093 100644
--- a/packages/api/src/router/auth.ts
+++ b/packages/api/src/router/auth.ts
@@ -1,3 +1,5 @@
+import { invalidateSessionToken } from "@acme/auth";
+
 import { createTRPCRouter, protectedProcedure, publicProcedure } from "../trpc";
 
 export const authRouter = createTRPCRouter({
@@ -8,4 +10,11 @@ export const authRouter = createTRPCRouter({
     // testing type validation of overridden next-auth Session in @acme/auth package
     return "you can see this secret message!";
   }),
+  signOut: protectedProcedure.mutation(async (opts) => {
+    if (!opts.ctx.token) {
+      return { success: false };
+    }
+    await invalidateSessionToken(opts.ctx.token);
+    return { success: true };
+  }),
 });
diff --git a/packages/api/src/trpc.ts b/packages/api/src/trpc.ts
index 8f1d72955b..b50e131476 100644
--- a/packages/api/src/trpc.ts
+++ b/packages/api/src/trpc.ts
@@ -10,7 +10,7 @@ import { initTRPC, TRPCError } from "@trpc/server";
 import superjson from "superjson";
 import { ZodError } from "zod";
 
-import { auth } from "@acme/auth";
+import { auth, validateToken } from "@acme/auth";
 import type { Session } from "@acme/auth";
 import { db } from "@acme/db";
 
@@ -25,6 +25,7 @@ import { db } from "@acme/db";
  */
 interface CreateContextOptions {
   session: Session | null;
+  token: string | null;
 }
 
 /**
@@ -38,7 +39,7 @@ interface CreateContextOptions {
  */
 const createInnerTRPCContext = (opts: CreateContextOptions) => {
   return {
-    session: opts.session,
+    ...opts,
     db,
   };
 };
@@ -52,13 +53,17 @@ export const createTRPCContext = async (opts: {
   req?: Request;
   auth: Session | null;
 }) => {
-  const session = opts.auth ?? (await auth());
-  const source = opts.req?.headers.get("x-trpc-source") ?? "unknown";
+  const authToken = opts.req?.headers.get("Authorization") ?? null;
+  const session = authToken
+    ? await validateToken(authToken)
+    : opts.auth ?? (await auth());
 
+  const source = opts.req?.headers.get("x-trpc-source") ?? "unknown";
   console.log(">>> tRPC Request from", source, "by", session?.user);
 
   return createInnerTRPCContext({
     session,
+    token: authToken,
   });
 };
 
diff --git a/packages/auth/index.ts b/packages/auth/index.ts
index d2516252cf..d5daa21578 100644
--- a/packages/auth/index.ts
+++ b/packages/auth/index.ts
@@ -2,7 +2,7 @@
 /* @see https://github.com/nextauthjs/next-auth/pull/8932 */
 
 import Discord from "@auth/core/providers/discord";
-import type { DefaultSession } from "@auth/core/types";
+import type { DefaultSession, Session } from "@auth/core/types";
 import { DrizzleAdapter } from "@auth/drizzle-adapter";
 import NextAuth from "next-auth";
 
@@ -18,13 +18,15 @@ declare module "next-auth" {
   }
 }
 
+const adapter = DrizzleAdapter(db, tableCreator);
+
 export const {
   handlers: { GET, POST },
   auth,
   signIn,
   signOut,
 } = NextAuth({
-  adapter: DrizzleAdapter(db, tableCreator),
+  adapter,
   providers: [Discord],
   callbacks: {
     session: ({ session, user }) => ({
@@ -36,3 +38,20 @@ export const {
     }),
   },
 });
+
+export const validateToken = async (token: string): Promise<Session | null> => {
+  const sessionToken = token.slice("Bearer ".length);
+  const session = await adapter.getSessionAndUser?.(sessionToken);
+  return session
+    ? {
+        user: {
+          ...session.user,
+        },
+        expires: session.session.expires.toISOString(),
+      }
+    : null;
+};
+
+export const invalidateSessionToken = async (token: string) => {
+  await adapter.deleteSession?.(token);
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d0d29ae430..75ec1f6fbe 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -59,12 +59,18 @@ importers:
       expo-router:
         specifier: 2.0.10
         version: 2.0.10(expo-constants@14.4.2)(expo-linking@5.0.2)(expo-modules-autolinking@1.5.1)(expo-status-bar@1.7.1)(expo@49.0.16)(metro@0.76.8)(react-dom@18.2.0)(react-native-gesture-handler@2.12.1)(react-native-reanimated@3.3.0)(react-native-safe-area-context@4.6.3)(react-native-screens@3.22.1)(react-native@0.72.6)(react@18.2.0)
+      expo-secure-store:
+        specifier: ^12.5.0
+        version: 12.5.0(expo@49.0.16)
       expo-splash-screen:
         specifier: ~0.22.0
         version: 0.22.0(expo-modules-autolinking@1.5.1)(expo@49.0.16)
       expo-status-bar:
         specifier: ~1.7.1
         version: 1.7.1
+      expo-web-browser:
+        specifier: ^12.5.0
+        version: 12.5.0(expo@49.0.16)
       nativewind:
         specifier: ^4.0.1
         version: 4.0.1(@babel/core@7.23.2)(react-native-reanimated@3.3.0)(react-native@0.72.6)(react@18.2.0)(tailwindcss@3.3.5)
@@ -4963,6 +4969,13 @@ packages:
     resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
     dev: false
 
+  /compare-urls@2.0.0:
+    resolution: {integrity: sha512-eCJcWn2OYFEIqbm70ta7LQowJOOZZqq1a2YbbFCFI1uwSvj+TWMwXVn7vPR1ceFNcAIt5RSTDbwdlX82gYLTkA==}
+    engines: {node: '>=6'}
+    dependencies:
+      normalize-url: 2.0.1
+    dev: false
+
   /compare-versions@3.6.0:
     resolution: {integrity: sha512-W6Af2Iw1z4CB7q4uU4hv646dW9GQuBM+YpC0UvUCWSD8w90SJjp+ujJuXaEMtAXBtSqGfMPuFOVn4/+FlaqfBA==}
     dev: false
@@ -6243,6 +6256,14 @@ packages:
       - supports-color
     dev: false
 
+  /expo-secure-store@12.5.0(expo@49.0.16):
+    resolution: {integrity: sha512-Ow2ei+SB1w4zPLxmOg2PVPf2i45Eii0T9KUaER5iRLJAMcBWN4nyGCxzESOoN3OrvxVadP0hAn6RVE1G3gdD+Q==}
+    peerDependencies:
+      expo: '*'
+    dependencies:
+      expo: 49.0.16(@babel/core@7.23.2)
+    dev: false
+
   /expo-splash-screen@0.20.5(expo-modules-autolinking@1.5.1)(expo@49.0.16):
     resolution: {integrity: sha512-nTALYdjHpeEA30rdOWSguxn72ctv8WM8ptuUgpfRgsWyn4i6rwYds/rBXisX69XO5fg+XjHAQqijGx/b28+3tg==}
     peerDependencies:
@@ -6273,6 +6294,16 @@ packages:
     resolution: {integrity: sha512-Wkm9uCmuQQBSU+l/AekWAQ1d0FYw560yL116+OAKJDyKBOUpPURoWkFbabM1EDxv+5scTuSThr/CvsA0nsSCow==}
     dev: false
 
+  /expo-web-browser@12.5.0(expo@49.0.16):
+    resolution: {integrity: sha512-3uDzP19DqcEicLOB4ZH6pGWzxlCQ8mLHSmWMmfXEBhZjooUkHUrysbzkNvQQa24ijy3uoUybX4jW0xPss594kA==}
+    peerDependencies:
+      expo: '*'
+    dependencies:
+      compare-urls: 2.0.0
+      expo: 49.0.16(@babel/core@7.23.2)
+      url: 0.11.0
+    dev: false
+
   /expo@49.0.16(@babel/core@7.23.2):
     resolution: {integrity: sha512-1TcpWUEpzCQ7FjtwO1j+l/UvNgrEDZWfQm4kOo9eVZVDNKavYo+KL4XXHeljSAOOGhI/plmpD3bvhfYoywOAFQ==}
     hasBin: true
@@ -7282,6 +7313,11 @@ packages:
     resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
     engines: {node: '>=8'}
 
+  /is-plain-obj@1.1.0:
+    resolution: {integrity: sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /is-plain-object@2.0.4:
     resolution: {integrity: sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==}
     engines: {node: '>=0.10.0'}
@@ -8760,6 +8796,15 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
+  /normalize-url@2.0.1:
+    resolution: {integrity: sha512-D6MUW4K/VzoJ4rJ01JFKxDrtY1v9wrgzCX5f2qj/lzH1m/lW6MhUZFKerVsnyjOhOsYzI9Kqqak+10l4LvLpMw==}
+    engines: {node: '>=4'}
+    dependencies:
+      prepend-http: 2.0.0
+      query-string: 5.1.1
+      sort-keys: 2.0.0
+    dev: false
+
   /npm-package-arg@7.0.0:
     resolution: {integrity: sha512-xXxr8y5U0kl8dVkz2oK7yZjPBvqM2fwaO5l3Yg13p03v8+E3qQcD0JNhHzjL1vyGgxcKkD0cco+NLR72iuPk3g==}
     dependencies:
@@ -9313,6 +9358,11 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
+  /prepend-http@2.0.0:
+    resolution: {integrity: sha512-ravE6m9Atw9Z/jjttRUZ+clIXogdghyZAuWJ3qEzjT+jI/dL1ifAqhZeC5VHzQp1MSt1+jxKkFNemj/iO7tVUA==}
+    engines: {node: '>=4'}
+    dev: false
+
   /prettier-plugin-tailwindcss@0.5.6(@ianvs/prettier-plugin-sort-imports@4.1.1)(prettier@3.0.3):
     resolution: {integrity: sha512-2Xgb+GQlkPAUCFi3sV+NOYcSI5XgduvDBL2Zt/hwJudeKXkyvRS65c38SB0yb9UB40+1rL83I6m0RtlOQ8eHdg==}
     engines: {node: '>=14.21.3'}
@@ -9508,6 +9558,15 @@ packages:
       side-channel: 1.0.4
     dev: false
 
+  /query-string@5.1.1:
+    resolution: {integrity: sha512-gjWOsm2SoGlgLEdAGt7a6slVOk9mGiXmPFMqrEhLQ68rhQuBnpfs3+EmlvqKyxnCo9/PPlF+9MtY02S1aFg+Jw==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      decode-uri-component: 0.2.2
+      object-assign: 4.1.1
+      strict-uri-encode: 1.1.0
+    dev: false
+
   /query-string@7.1.3:
     resolution: {integrity: sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg==}
     engines: {node: '>=6'}
@@ -10335,6 +10394,13 @@ packages:
       smart-buffer: 4.2.0
     dev: true
 
+  /sort-keys@2.0.0:
+    resolution: {integrity: sha512-/dPCrG1s3ePpWm6yBbxZq5Be1dXGLyLn9Z791chDC3NFrpkVbWGzkBwPN1knaciexFXgRJ7hzdnwZ4stHSDmjg==}
+    engines: {node: '>=4'}
+    dependencies:
+      is-plain-obj: 1.1.0
+    dev: false
+
   /source-map-js@1.0.2:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
@@ -10425,6 +10491,11 @@ packages:
     engines: {node: '>=10.0.0'}
     dev: false
 
+  /strict-uri-encode@1.1.0:
+    resolution: {integrity: sha512-R3f198pcvnB+5IpnBlRkphuE9n46WyVl8I39W/ZUTZLz4nqSP/oLYUrcnJrw462Ds8he4YKMov2efsTIw1BDGQ==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /strict-uri-encode@2.0.0:
     resolution: {integrity: sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==}
     engines: {node: '>=4'}