Use server-side auth

app/.env.local.template

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_SUPABASE_URL=
+NEXT_PUBLIC_SUPABASE_ANON_KEY=

app/next.config.mjs

@@ -1,7 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: false,
-  output: 'export',
   images: {
     unoptimized: true,
   },

app/package.json

@@ -21,12 +21,10 @@
     "@capacitor/core": "^5.6.0",
     "@capacitor/ios": "^5.6.0",
     "@capacitor/preferences": "^5.0.7",
-    "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-slot": "^1.0.2",
-    "@supabase/auth-helpers-nextjs": "^0.8.7",
-    "@supabase/auth-helpers-react": "^0.4.2",
+    "@supabase/ssr": "^0.1.0",
     "@supabase/supabase-js": "^2.39.3",
     "@tanstack/react-query": "^5.18.1",
     "class-variance-authority": "^0.7.0",

app/src/components/LoginForm.tsx

@@ -1,96 +1,48 @@
-import { useSupabaseConfig } from '@/utils/useSupabaseConfig';
-import { createClient } from '@supabase/supabase-js';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { toast } from 'sonner';
+
 import { Button } from './ui/button';
+import { createClient } from '@/utils/supabase/component';
 
 export default function LoginForm() {
   const router = useRouter();
-
-  const [supabaseUrl, setSupabaseUrl] = useState('');
-  const [supabaseToken, setSupabaseToken] = useState('');
+  const supabase = createClient();
   const [password, setPassword] = useState('');
   const [email, setEmail] = useState('');
 
-  const {
-    supabaseUrl: savedUrl,
-    supabaseToken: savedToken,
-    setSupabaseConfig,
-  } = useSupabaseConfig();
-
-  useEffect(() => {
-    if (savedUrl) {
-      setSupabaseUrl(savedUrl);
-    }
-    if (savedToken) {
-      setSupabaseToken(savedToken);
-    }
-  }, [savedUrl, savedToken]);
+  async function handleLogin(e: React.FormEvent) {
+    e.preventDefault();
 
-  async function emailLogin() {
     try {
-      const supabaseClient = createClient(supabaseUrl, supabaseToken);
-      const { data, error } = await supabaseClient.auth.signInWithPassword({
+      const { error } = await supabase.auth.signInWithPassword({
         email,
         password,
       });
       if (error) {
         toast.error(error.message);
-      } else {
-        toast.success('Login successful');
-        setSupabaseConfig(supabaseUrl, supabaseToken);
-        router.reload();
+        return;
       }
+      toast.success('Login successful');
+      router.reload();
     } catch (error: any) {
-      console.error('ERROR', error);
       toast.error(error.message || error.code || error.msg || 'Unknown error');
     }
   }
 
   return (
     <div className="pt-safe mt-6 flex w-full flex-col p-8">
       <h1 className="pt-4 text-2xl font-bold">Login to ADeus</h1>
-
-      <div>
-        <div className="flex flex-wrap pt-4">
-          <label className="mb-1  block text-sm font-medium" htmlFor="text">
-            Supabase URL
-          </label>
-          <input
-            id="supabaseUrl"
-            placeholder={'Enter your Supabase URL'}
-            type="text"
-            value={supabaseUrl}
-            onChange={(e) => setSupabaseUrl(e.target.value)}
-            className="form-input h-10  w-full rounded-md border-2 pl-2"
-            required
-          />
-        </div>
-
-        <div className="flex flex-wrap pt-4">
-          <label className="mb-1  block text-sm font-medium" htmlFor="email">
-            Supabase Token
-          </label>
-          <input
-            id="supabaseToken"
-            placeholder={'Enter your Supabase token'}
-            type="text"
-            value={supabaseToken}
-            onChange={(e) => setSupabaseToken(e.target.value)}
-            className="form-input h-10  w-full rounded-md border-2 pl-2"
-            required
-          />
-        </div>
-
+      <form onSubmit={handleLogin}>
         <div className="flex flex-wrap pt-4">
           <label className="mb-1  block text-sm font-medium" htmlFor="email">
             Email
           </label>
           <input
+            autoFocus
             id="email"
-            placeholder={'Enter your Email'}
+            placeholder="Enter your Email"
             type="email"
             value={email}
             onChange={(e) => setEmail(e.target.value)}
@@ -112,16 +64,20 @@ export default function LoginForm() {
             required
           />
         </div>
-
         <div className="mt-6 flex flex-col items-center">
-          <Button onClick={emailLogin} className="w-full font-bold">
+          <Button type="submit" className="w-full font-bold">
             Login
           </Button>
         </div>
-      </div>
+      </form>
       <p className="mt-8 pb-6 text-sm opacity-50">
         Don&apos;t have these details? Please check the setup guide{' '}
-        <Link className="underline" href="https://x.com/adamcohenhillel">
+        <Link
+          className="underline"
+          href="https://docs.adeus.ai"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           here
         </Link>
       </p>

app/src/components/LogoutButton.tsx

@@ -1,17 +1,24 @@
 import { SupabaseClient } from '@supabase/supabase-js';
 import { LogOut } from 'lucide-react';
+import { useRouter } from 'next/router';
+
 import { Button } from './ui/button';
 
 export default function LogoutButton({
   supabaseClient,
 }: {
   supabaseClient: SupabaseClient;
 }) {
+  const router = useRouter();
+
   return (
     <Button
       size={'icon'}
       className="bg-muted/20 text-muted-foreground hover:bg-muted/40 rounded-full"
-      onClick={async () => await supabaseClient.auth.signOut()}
+      onClick={async () => {
+        await supabaseClient.auth.signOut();
+        router.reload();
+      }}
     >
       <LogOut size={20} />
     </Button>

app/src/pages/index.tsx

@@ -1,13 +1,27 @@
+import type { GetServerSidePropsContext } from 'next';
+
+import { createClient as createServerClient } from '@/utils/supabase/server-props';
+import { createClient } from '@/utils/supabase/component';
 import Chat from '@/components/Chat';
-import LoginForm from '@/components/LoginForm';
-import { useSupabase } from '@/utils/useSupabaseConfig';
 
 export default function Index() {
-  const { user, supabaseClient } = useSupabase();
+  const supabase = createClient();
+
+  return <Chat supabaseClient={supabase} />;
+}
+
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+  const supabase = createServerClient(context);
+  const { data, error } = await supabase.auth.getUser();
 
-  if (!user || !supabaseClient) {
-    return <LoginForm />;
+  if (error || !data) {
+    return {
+      redirect: {
+        destination: '/login',
+        permanent: false,
+      },
+    };
   }
 
-  return <Chat supabaseClient={supabaseClient} />;
+  return { props: {} };
 }

app/src/pages/login.tsx

@@ -0,0 +1,24 @@
+import type { GetServerSidePropsContext } from 'next';
+
+import { createClient as createServerClient } from '@/utils/supabase/server-props';
+import LoginForm from '@/components/LoginForm';
+
+export default function Login() {
+  return <LoginForm />;
+}
+
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+  const supabase = createServerClient(context);
+  const { data, error } = await supabase.auth.getUser();
+
+  if (data.user && !error) {
+    return {
+      redirect: {
+        destination: '/',
+        permanent: false,
+      },
+    };
+  }
+
+  return { props: {} };
+}

app/src/utils/supabase/component.ts

@@ -0,0 +1,10 @@
+import { createBrowserClient } from "@supabase/ssr";
+
+export function createClient() {
+  const supabase = createBrowserClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+  );
+
+  return supabase;
+}