fix: Google SSO

Author: danieldanielecki

.env.example

@@ -1,3 +1,5 @@
 AZURE_COSMOSDB_DATABASE=
 AZURE_COSMOSDB_ENDPOINT=
 AZURE_COSMOSDB_KEY=
+NEXT_PUBLIC_APPWRITE_ENDPOINT=
+NEXT_PUBLIC_APPWRITE_PROJECT_ID=

AUTHENTICATION_SETUP.md

@@ -60,18 +60,29 @@ This guide will help you set up Appwrite authentication for your Practice Exams
 Create a `.env.local` file in your project root with:
 
 ```bash
-NEXT_PUBLIC_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
-NEXT_PUBLIC_APPWRITE_PROJECT_ID=your_project_id_here
+APPWRITE_PUBLIC_ENDPOINT=https://[REGION].cloud.appwrite.io/v1
+APPWRITE_PROJECT_ID=your_project_id_here
 ```
 
 Replace `your_project_id_here` with your actual Appwrite project ID.
 
 ## Step 4: Update Callback URLs
 
-In your Appwrite project settings, add these callback URLs:
+In your Appwrite project settings, you need to configure callback URLs for OAuth providers:
 
-- **Success URL**: `https://yourdomain.com/auth/callback?success=true`
-- **Failure URL**: `https://yourdomain.com/auth/callback?failure=true`
+### For Google OAuth:
+
+1. Go to **Auth** → **OAuth2 Providers** → **Google**
+2. In the Google OAuth configuration, you'll see a **Redirect URL** field
+3. Set this to: `https://yourdomain.com/auth/callback`
+
+### For Apple OAuth:
+
+1. Go to **Auth** → **OAuth2 Providers** → **Apple**
+2. In the Apple OAuth configuration, you'll see a **Redirect URL** field
+3. Set this to: `https://yourdomain.com/auth/callback`
+
+**Note**: The success/failure URLs mentioned in the original documentation are not standard Appwrite settings. Appwrite handles OAuth redirects automatically to the redirect URL you specify above. The success/failure parameters are handled by your application logic in the callback route.
 
 ## Step 5: Test Authentication
 

app/auth/callback/page.tsx

@@ -4,10 +4,12 @@ import { useEffect, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { AuthService } from "../../../lib/appwrite/auth";
 import LoadingIndicator from "../../../components/LoadingIndicator";
+import { useAuth } from "../../../contexts/AuthContext";
 
 export default function AuthCallback() {
   const router = useRouter();
   const searchParams = useSearchParams();
+  const { refreshUser } = useAuth();
   const [status, setStatus] = useState<"loading" | "success" | "error">(
     "loading",
   );
@@ -30,6 +32,8 @@ export default function AuthCallback() {
         }
 
         if (success === "true") {
+          // Refresh auth context to update authentication state
+          await refreshUser();
           setStatus("success");
           setMessage("Authentication successful! Redirecting...");
           setTimeout(() => router.push("/"), 2000);
@@ -40,6 +44,8 @@ export default function AuthCallback() {
         if (userId && secret) {
           const result = await AuthService.updateEmailSession(userId, secret);
           if (result.success) {
+            // Refresh auth context to update authentication state
+            await refreshUser();
             setStatus("success");
             setMessage("Email verified successfully! Redirecting...");
             setTimeout(() => router.push("/"), 2000);
@@ -61,7 +67,7 @@ export default function AuthCallback() {
     };
 
     handleCallback();
-  }, [router, searchParams]);
+  }, [router, searchParams, refreshUser]);
 
   if (status === "loading") {
     return (

components/TopNav.tsx

@@ -86,15 +86,17 @@ const TopNav = () => {
             </button>
 
             {showUserMenu && (
-              <div className="absolute right-0 mt-2 w-48 bg-slate-800 rounded-lg shadow-lg border border-slate-600 z-50">
+              <div className="absolute right-0 mt-2 w-64 bg-slate-800 rounded-lg shadow-lg border border-slate-600 z-50">
                 <div className="py-2">
-                  <div className="px-4 py-2 text-sm text-slate-300 border-b border-slate-600">
-                    Signed in as{" "}
-                    <span className="font-medium">{user.email}</span>
+                  <div className="px-4 py-2 text-sm text-slate-300 border-b border-slate-600 text-center">
+                    <div>Signed in as</div>
+                    <div className="font-medium text-white mt-1 break-all">
+                      {user.email}
+                    </div>
                   </div>
                   <button
                     onClick={handleSignOut}
-                    className="w-full text-left px-4 py-2 text-sm text-slate-300 hover:bg-slate-700 transition-colors"
+                    className="w-full text-center px-4 py-2 text-sm text-slate-300 hover:bg-slate-700 transition-colors"
                   >
                     Sign Out
                   </button>

lib/appwrite/auth.ts

@@ -19,7 +19,7 @@ export class AuthService {
     email: string,
   ): Promise<{ success: boolean; error?: AuthError }> {
     try {
-      await account.createMagicURLSession(
+      await (account as any).createMagicURLSession(
         ID.unique(),
         email,
         `${window.location.origin}/auth/callback`,
@@ -36,23 +36,6 @@ export class AuthService {
     }
   }
 
-  static async createEmailOTPSession(
-    email: string,
-  ): Promise<{ success: boolean; error?: AuthError }> {
-    try {
-      await account.createEmailSession(email, "123456"); // 6-digit OTP
-      return { success: true };
-    } catch (error: any) {
-      return {
-        success: false,
-        error: {
-          message: error.message || "Failed to send OTP",
-          code: error.code,
-        },
-      };
-    }
-  }
-
   static async updateEmailSession(
     userId: string,
     secret: string,
@@ -79,11 +62,14 @@ export class AuthService {
     try {
       const redirectUrl = `${window.location.origin}/auth/callback`;
       const url = await account.createOAuth2Session(
-        "google",
+        "google" as any,
         redirectUrl,
         redirectUrl,
       );
-      window.location.href = url.toString();
+
+      if (typeof url === "string") {
+        window.location.href = url;
+      }
       return { success: true };
     } catch (error: any) {
       return {
@@ -104,11 +90,14 @@ export class AuthService {
     try {
       const redirectUrl = `${window.location.origin}/auth/callback`;
       const url = await account.createOAuth2Session(
-        "apple",
+        "apple" as any,
         redirectUrl,
         redirectUrl,
       );
-      window.location.href = url.toString();
+
+      if (typeof url === "string") {
+        window.location.href = url;
+      }
       return { success: true };
     } catch (error: any) {
       return {

lib/appwrite/config.ts

@@ -2,7 +2,8 @@ import { Client, Account, Databases } from "appwrite";
 
 const client = new Client()
   .setEndpoint(
-    process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT || "https://cloud.appwrite.io/v1",
+    process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT ||
+      "https://fra.cloud.appwrite.io/v1",
   )
   .setProject(process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID || "");
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "practice-exams-platform",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "private": true,
   "engines": {
     "node": "20.x"