feat(auth): add supabase token verification flow

- Add supabaseVerifyToken method to AuthService for token verification and session setup
- Implement verifyToken method in SupabaseAuthService to verify token and create user session
- Extend authRouter with supabaseVerifyToken procedure for token verification via API
- Modify AppComponent to detect access_token in URL hash and verify using supabaseVerifyToken
- Clear URL hash after token verification to improve user experience
- Refactor and clean up related authentication code for OAuth and token verification integration

Author: EndyKaufman

web/src/app/app.ts

@@ -2,7 +2,7 @@ import { RouteMeta } from '@analogjs/router';
 import { Component, inject, OnInit } from '@angular/core';
 import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
 import { LucideAngularModule } from 'lucide-angular';
-import { concatMap, first, mergeMap, tap } from 'rxjs';
+import { concatMap, first, firstValueFrom, mergeMap, tap } from 'rxjs';
 
 import { AppInitializerService } from './app.initializer';
 import { ColorSchemeSwitcherComponent } from './components/theme/color-scheme-switcher.component';
@@ -133,6 +133,16 @@ export class AppComponent implements OnInit {
     this.router.events
       .pipe(
         concatMap(async event => {
+          if (
+            typeof location !== 'undefined' &&
+            location.hash.startsWith('#access_token=')
+          ) {
+            const token = location.hash
+              .split('#access_token=')?.[1]
+              ?.split('&')?.[0];
+            await firstValueFrom(this.authService.supabaseVerifyToken(token));
+            location.hash = '';
+          }
           if (event instanceof NavigationEnd) {
             return await this.appInitializerService.init();
           }

web/src/app/services/auth.service.ts

@@ -118,7 +118,9 @@ export class AuthService {
     );
   }
 
-  supabaseSignInWithOAuth(provider: 'google' | 'github' | 'facebook' | 'twitter') {
+  supabaseSignInWithOAuth(
+    provider: 'google' | 'github' | 'facebook' | 'twitter'
+  ) {
     return firstValueFrom(
       this.trpc.auth.supabaseSignInWithOAuth.mutate({ provider })
     ).then(redirectUrl => {
@@ -127,7 +129,32 @@ export class AuthService {
     });
   }
 
-  supabaseVerifyEmail(token: string, type: 'signup' | 'recovery' | 'invite' | 'magiclink', email?: string) {
+  supabaseVerifyToken(token: string) {
+    return from(this.sessionService.remove()).pipe(
+      concatMap(async () => {
+        try {
+          const { sessionId, user } = await firstValueFrom(
+            this.trpc.auth.supabaseVerifyToken.mutate({ token })
+          );
+          await this.sessionService.set(sessionId);
+          await this.profileService.set(user as unknown as User);
+          return { sessionId, user };
+        } catch (error) {
+          await this.errorHandler.handleError(
+            error,
+            'Failed to verify token with Supabase'
+          );
+          throw error;
+        }
+      })
+    );
+  }
+
+  supabaseVerifyEmail(
+    token: string,
+    type: 'signup' | 'recovery' | 'invite' | 'magiclink',
+    email?: string
+  ) {
     return from(this.sessionService.remove()).pipe(
       concatMap(async () => {
         try {

web/src/server/supabase/auth.service.ts

@@ -56,7 +56,6 @@ export class SupabaseAuthService {
 
   async signIn(signInData: SupabaseSignInData): Promise<SupabaseAuthResult> {
     const { email, password } = signInData;
-    console.log({email, password})
 
     // Sign in user with Supabase
     const { data, error } = await this.supabase.auth.signInWithPassword({
@@ -83,7 +82,9 @@ export class SupabaseAuthService {
     return { user: user as UserType, sessionId: session.id };
   }
 
-  async signInWithOAuth(provider: 'google' | 'github' | 'facebook' | 'twitter') {
+  async signInWithOAuth(
+    provider: 'google' | 'github' | 'facebook' | 'twitter'
+  ) {
     const { data, error } = await this.supabase.auth.signInWithOAuth({
       provider,
       options: {
@@ -98,13 +99,41 @@ export class SupabaseAuthService {
     return data.url; // This is the URL to redirect the user to
   }
 
-  async verifyEmailToken(token: string, type: 'signup' | 'recovery' | 'invite' | 'magiclink', email?: string) {
+  async verifyToken(token: string) {
+    const { data, error } = await this.supabase.auth.getUser(token);
+
+    if (error) {
+      throw new Error(`Token verification failed: ${error.message}`);
+    }
+
+    if (!data.user) {
+      throw new Error('No user returned from token verification');
+    }
+
+    // Create or update user in our database
+    const user = await this.createOrUpdateUser(data.user);
+
+    // Create session in our database
+    const session = await prisma.session.create({
+      data: { userId: user.id },
+    });
+
+    return { user: user as UserType, sessionId: session.id };
+  }
+
+  async verifyEmailToken(
+    token: string,
+    type: 'signup' | 'recovery' | 'invite' | 'magiclink',
+    email?: string
+  ) {
     let verifyParams;
-    
+
     if (type === 'signup' || type === 'magiclink') {
       // For signup and magiclink, we need the email
       if (!email) {
-        throw new Error('Email is required for signup and magiclink verification');
+        throw new Error(
+          'Email is required for signup and magiclink verification'
+        );
       }
       verifyParams = {
         email,
@@ -118,7 +147,7 @@ export class SupabaseAuthService {
         type,
       };
     }
-    
+
     const { data, error } = await this.supabase.auth.verifyOtp(verifyParams);
 
     if (error) {
@@ -176,7 +205,11 @@ export class SupabaseAuthService {
           supabaseUserData: {
             id: supabaseUser.id,
             email: supabaseUser.email,
-            name: name || supabaseUser.user_metadata?.name || supabaseUser.email?.split('@')[0] || '',
+            name:
+              name ||
+              supabaseUser.user_metadata?.name ||
+              supabaseUser.email?.split('@')[0] ||
+              '',
             aud: supabaseUser.aud,
             role: supabaseUser.role,
             emailConfirmedAt: supabaseUser.email_confirmed_at,
@@ -194,7 +227,11 @@ export class SupabaseAuthService {
           supabaseUserData: {
             id: supabaseUser.id,
             email: supabaseUser.email,
-            name: name || supabaseUser.user_metadata?.name || supabaseUser.email?.split('@')[0] || '',
+            name:
+              name ||
+              supabaseUser.user_metadata?.name ||
+              supabaseUser.email?.split('@')[0] ||
+              '',
             aud: supabaseUser.aud,
             role: supabaseUser.role,
             emailConfirmedAt: supabaseUser.email_confirmed_at,
@@ -209,4 +246,4 @@ export class SupabaseAuthService {
 
     return user;
   }
-}
+}

web/src/server/trpc/routers/auth.ts

@@ -4,7 +4,11 @@ import { z } from 'zod';
 
 import { prisma } from '../../prisma';
 import { UserSchema, UserType } from '../../types/UserSchema';
-import { SupabaseAuthService, SupabaseSignUpData, SupabaseSignInData } from '../../supabase/auth.service';
+import {
+  SupabaseAuthService,
+  SupabaseSignUpData,
+  SupabaseSignInData,
+} from '../../supabase/auth.service';
 import { publicProcedure, router } from '../trpc';
 
 const supabaseAuthService = new SupabaseAuthService();
@@ -73,7 +77,7 @@ export const authRouter = router({
         password: input.password,
         name: input.name,
       };
-      
+
       return await supabaseAuthService.signUp(signUpData);
     }),
 
@@ -95,7 +99,7 @@ export const authRouter = router({
         email: input.email,
         password: input.password,
       };
-      
+
       return await supabaseAuthService.signIn(signInData);
     }),
 
@@ -125,7 +129,26 @@ export const authRouter = router({
       })
     )
     .mutation(async ({ input }) => {
-      return await supabaseAuthService.verifyEmailToken(input.token, input.type, input.email);
+      return await supabaseAuthService.verifyEmailToken(
+        input.token,
+        input.type,
+        input.email
+      );
     }),
-});
 
+  supabaseVerifyToken: publicProcedure
+    .input(
+      z.object({
+        token: z.string(),
+      })
+    )
+    .output(
+      z.object({
+        sessionId: z.string().uuid(),
+        user: UserSchema,
+      })
+    )
+    .mutation(async ({ input }) => {
+      return await supabaseAuthService.verifyToken(input.token);
+    }),
+});