Ready for 1.1.3-rc.3 release.

.env.example

@@ -5,9 +5,9 @@ NODE_ENV=production
 DATABASE_URL=postgresql://devuser:changeme@db:5432/devdb?schema=public
 
 # Projet
-NEXT_PUBLIC_PROJECT_NAME="Portabase"
-NEXT_PUBLIC_PROJECT_DESCRIPTION="Portabase is a powerful database manager"
-NEXT_PUBLIC_PROJECT_URL=http://app.portabase.io
+PROJECT_NAME="Portabase"
+PROJECT_DESCRIPTION="Portabase is a powerful database manager"
+PROJECT_URL=http://app.portabase.io
 PROJECT_SECRET=
 
 # SMTP (email)
@@ -20,7 +20,7 @@ SMTP_FROM=
 # Google
 AUTH_GOOGLE_ID=
 AUTH_GOOGLE_SECRET=
-NEXT_PUBLIC_GOOGLE_AUTH=
+AUTH_GOOGLE_METHOD=
 
 # S3
 S3_ENDPOINT=http://app.s3.portabase.io

app/(auth)/layout.tsx

@@ -1,47 +1,20 @@
-"use client"
-import React, {useEffect, useState} from "react";
-import {env} from "@/env.mjs";
-import {useTheme} from "next-themes";
-import {useSession} from "@/lib/auth/auth-client";
-import {useRouter} from "next/navigation";
+import React from "react";
+import {redirect} from "next/navigation";
+import {currentUser} from "@/lib/auth/current-user";
+import {AuthLogoSection} from "@/components/wrappers/auth/auth-logo-section";
 
+export default async function Layout({children}: { children: React.ReactNode }) {
 
-export default function Layout({children}: { children: React.ReactNode }) {
+    const user = await currentUser();
 
-    const { resolvedTheme } = useTheme();
-    const [mounted, setMounted] = useState(false);
-    const router = useRouter();
-    const { data: session } = useSession();
-
-    if (session && session.user && !session.user.banned && session.user.role !== "pending") {
-        router.replace("/dashboard/home");
+    if (user && !user.banned && user.role !== "pending") {
+        redirect("/dashboard/home");
     }
 
-    useEffect(() => {
-        setMounted(true);
-    }, []);
-
-    if (!mounted) return null;
-
-    const imageTheme = resolvedTheme === "dark" ? "/images/logo-white.png" : "/images/logo-black.png";
-
     return (
         <div className="flex min-h-full flex-1 flex-col justify-center py-12 sm:px-6 lg:px-8 ">
             <div className="mx-auto w-full max-w-md">
-                <div className="sm:mx-auto sm:w-full sm:max-w-md flex items-center justify-center space-x-2">
-                    <img
-                        className="p-12 text-black dark:text-white"
-                        src={imageTheme}
-                        // loading="eager"
-                        alt="Logo"
-                        // width={1024}
-                        // height={1024}
-                    />
-                    <span
-                        className="text-sm text-muted-foreground -ml-12 -mb-12">
-                        v{env.NEXT_PUBLIC_PROJECT_VERSION}
-                    </span>
-                </div>
+                <AuthLogoSection/>
                 <div>{children}</div>
             </div>
             <footer className="py-4 text-center text-xs justify-items-end text-muted-foreground">

app/(auth)/login/page.tsx

@@ -1,14 +1,17 @@
 import {notFound} from "next/navigation";
 import {env} from "@/env.mjs";
 import {LoginForm} from "@/components/wrappers/auth/login/login-form/login-form";
+import {Metadata} from "next";
+
+export const metadata: Metadata = {
+    title: "Login",
+};
 
 export default async function SignInPage() {
-
     const authGoogleEnabled = env.AUTH_GOOGLE_METHOD;
     if (!authGoogleEnabled) {
         notFound()
     }
-
     return (
         <div className="mx-auto grid w-full gap-6">
             <LoginForm authGoogleEnabled={authGoogleEnabled}/>

app/(auth)/register/page.tsx

@@ -1,5 +1,10 @@
 import {PageParams} from "@/types/next";
 import {RegisterForm} from "@/components/wrappers/auth/register/register-form/register-form";
+import {Metadata} from "next";
+
+export const metadata: Metadata = {
+    title: "Register",
+};
 
 export default async function RoutePage(props: PageParams<{}>) {
     return (

app/(customer)/dashboard/(admin)/admin/page.tsx

@@ -3,8 +3,11 @@ import {Page, PageContent, PageHeader, PageTitle} from "@/features/layout/page";
 import {AdminTabs} from "@/components/wrappers/dashboard/admin/admin-tabs";
 import {db} from "@/db";
 import {isNull} from "drizzle-orm";
+import {Metadata} from "next";
 
-
+export const metadata: Metadata = {
+    title: "Admin",
+};
 export default async function RoutePage(props: PageParams<{}>) {
 
     const users = await db.query.user.findMany({

app/(customer)/dashboard/(admin)/agents/new/page.tsx

@@ -1,6 +1,11 @@
-import { PageParams } from "@/types/next";
-import { Page, PageContent, PageHeader, PageTitle } from "@/features/layout/page";
-import { AgentForm } from "@/components/wrappers/dashboard/agent/agent-form/agent-form";
+import {PageParams} from "@/types/next";
+import {Page, PageContent, PageHeader, PageTitle} from "@/features/layout/page";
+import {AgentForm} from "@/components/wrappers/dashboard/agent/agent-form/agent-form";
+import {Metadata} from "next";
+
+export const metadata: Metadata = {
+    title: "Create Agent",
+};
 
 export default async function RoutePage(props: PageParams<{}>) {
     return (
@@ -9,7 +14,7 @@ export default async function RoutePage(props: PageParams<{}>) {
                 <PageTitle>Create new agent</PageTitle>
             </PageHeader>
             <PageContent>
-                <AgentForm />
+                <AgentForm/>
             </PageContent>
         </Page>
     );

app/(customer)/dashboard/(admin)/agents/page.tsx

@@ -1,18 +1,19 @@
-import { PageParams } from "@/types/next";
-import { AgentCard } from "@/components/wrappers/dashboard/agent/agent-card/agent-card";
-import { CardsWithPagination } from "@/components/wrappers/common/cards-with-pagination";
-import { Button } from "@/components/ui/button";
+import {PageParams} from "@/types/next";
+import {AgentCard} from "@/components/wrappers/dashboard/agent/agent-card/agent-card";
+import {CardsWithPagination} from "@/components/wrappers/common/cards-with-pagination";
+import {Button} from "@/components/ui/button";
 import Link from "next/link";
-import { Page, PageActions, PageContent, PageHeader, PageTitle } from "@/features/layout/page";
-import { notFound } from "next/navigation";
-import { db } from "@/db";
+import {Page, PageActions, PageContent, PageHeader, PageTitle} from "@/features/layout/page";
+import {notFound} from "next/navigation";
+import {db} from "@/db";
 import * as drizzleDb from "@/db";
-
-import {and, eq, not} from "drizzle-orm";
-import {Plus} from "lucide-react";
-import {cn} from "@/lib/utils";
+import {eq, not} from "drizzle-orm";
 import {EmptyStatePlaceholder} from "@/components/wrappers/common/empty-state-placeholder";
-// export const dynamic = "force-dynamic";
+import {Metadata} from "next";
+
+export const metadata: Metadata = {
+    title: "Agents",
+};
 
 export default async function RoutePage(props: PageParams<{}>) {
 
@@ -39,7 +40,7 @@ export default async function RoutePage(props: PageParams<{}>) {
             </PageHeader>
             <PageContent>
                 {agents.length > 0 ? (
-                    <CardsWithPagination data={agents} cardItem={AgentCard} cardsPerPage={4} numberOfColumns={1} />
+                    <CardsWithPagination data={agents} cardItem={AgentCard} cardsPerPage={4} numberOfColumns={1}/>
                 ) : (
                     <EmptyStatePlaceholder
                         url={"/dashboard/agents/new"}

app/(customer)/dashboard/(organization)/projects/page.tsx

@@ -9,7 +9,11 @@ import {db} from "@/db";
 import {notFound} from "next/navigation";
 import {getActiveMember, getOrganization} from "@/lib/auth/auth";
 import {EmptyStatePlaceholder} from "@/components/wrappers/common/empty-state-placeholder";
+import {Metadata} from "next";
 
+export const metadata: Metadata = {
+    title: "Projects",
+};
 
 export default async function RoutePage(props: PageParams<{}>) {
 

app/(customer)/dashboard/(organization)/settings/page.tsx

@@ -10,7 +10,11 @@ import {EditButtonSettings} from "@/components/wrappers/dashboard/settings/edit-
 import {
     SettingsOrganizationMembersTable
 } from "@/components/wrappers/dashboard/settings/settings-organization-members-table";
+import {Metadata} from "next";
 
+export const metadata: Metadata = {
+    title: "Settings",
+};
 
 export default async function RoutePage(props: PageParams<{ slug: string }>) {
     const organization = await getOrganization({});

app/(customer)/dashboard/(organization)/statistics/page.tsx

@@ -9,7 +9,11 @@ import {and, asc, count, eq, inArray} from "drizzle-orm";
 import * as drizzleDb from "@/db";
 import {getOrganization} from "@/lib/auth/auth";
 import {Building2, DatabaseBackup, Folder, RefreshCcw} from "lucide-react";
+import {Metadata} from "next";
 
+export const metadata: Metadata = {
+    title: "Statistics",
+};
 
 export default async function RoutePage(props: PageParams<{}>) {
     const organization = await getOrganization({});

app/(customer)/dashboard/home/page.tsx

@@ -8,6 +8,11 @@ import {db} from "@/db";
 import {asc, inArray} from "drizzle-orm";
 import * as drizzleDb from "@/db";
 import {listOrganizations} from "@/lib/auth/auth";
+import {Metadata} from "next";
+
+export const metadata: Metadata = {
+    title: "Home",
+};
 
 export default async function RoutePage(props: PageParams<{}>) {
 

app/(customer)/dashboard/profile/page.tsx

@@ -7,6 +7,11 @@ import {ButtonDeleteAccount} from "@/components/wrappers/dashboard/profile/butto
 import {AvatarWithUpload} from "@/components/wrappers/dashboard/profile/avatar/avatar-with-upload";
 import {currentUser} from "@/lib/auth/current-user";
 import {getAccounts, getSessions} from "@/lib/auth/auth";
+import {Metadata} from "next";
+
+export const metadata: Metadata = {
+    title: "Profile",
+};
 
 export default async function RoutePage(props: PageParams<{}>) {
     const user = await currentUser();
@@ -39,11 +44,8 @@ export default async function RoutePage(props: PageParams<{}>) {
                     {user.name}
                     <Badge className="ml-3 hidden lg:block">{user.role}</Badge>
                 </PageTitle>
-                {/*<PageActions className="mt-2 hidden sm:block">*/}
-                {/*    <ButtonDeleteAccount text="Delete my account"/>*/}
-                {/*</PageActions>*/}
             </div>
-            <PageContent >
+            <PageContent>
                 <UserForm
                     userId={user.id}
                     sessions={sessions} accounts={accounts}
@@ -53,9 +55,6 @@ export default async function RoutePage(props: PageParams<{}>) {
                         role: user.role ?? undefined,
                     }}
                 />
-                {/*<div className="mt-4 sm:hidden ">*/}
-                {/*    <ButtonDeleteAccount  text="Delete my account"/>*/}
-                {/*</div>*/}
             </PageContent>
         </Page>
     );

app/api/config/route.ts

@@ -0,0 +1,9 @@
+import {NextResponse} from "next/server";
+
+export async function GET() {
+    return NextResponse.json({
+        PROJECT_URL: process.env.PROJECT_URL,
+        PROJECT_NAME: process.env.PROJECT_NAME,
+        PROJECT_DESCRIPTION: process.env.PROJECT_DESCRIPTION,
+    });
+}

app/layout.tsx

@@ -6,9 +6,14 @@ import {cn} from "@/lib/utils";
 import {ConsoleSilencer} from "@/components/wrappers/common/console-silencer";
 import {inter} from "@/fonts/fonts";
 
+const title = process.env.PROJECT_NAME ?? "App Title";
+
 export const metadata: Metadata = {
-    title: process.env.NEXT_PUBLIC_PROJECT_NAME ?? "Portabase",
-    description: process.env.NEXT_PUBLIC_PROJECT_DESCRIPTION ?? undefined,
+    title: {
+        default: title,
+        template: `%s - ${title}`
+    },
+    description: process.env.PROJECT_DESCRIPTION ?? undefined,
 };
 
 export default function RootLayout({

app/not-found.tsx

@@ -1,3 +1,4 @@
+import BackButton from "@/components/wrappers/common/button/back-button";
 
 export default async function NotFound() {
     return(
@@ -7,6 +8,7 @@ export default async function NotFound() {
                     <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">Not found</h1>
                     <p className="leading-7 [&:not(:first-child)]:mt-6">The content you are trying to view is not available.</p>
                 </div>
+                <BackButton>Go home</BackButton>
             </div>
         </div>
     )

proxy.ts

@@ -64,6 +64,7 @@ function checkRouteExists(pathname: string) {
         /^\/api\/images\/[^/]+\/?$/,
         /^\/api\/events\/?$/,
         /^\/api\/init\/?$/,
+        /^\/api\/config\/?$/,
     ];
     return routePatterns.some((pattern) => pattern.test(pathname));
 }

src/components/wrappers/auth/auth-logo-section.tsx

@@ -0,0 +1,31 @@
+"use client"
+import {env} from "@/env.mjs";
+import React, {useEffect, useState} from "react";
+import {useTheme} from "next-themes";
+
+
+export const AuthLogoSection = () => {
+
+    const {resolvedTheme} = useTheme();
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    if (!mounted) return null;
+
+
+    const imageTheme = resolvedTheme === "dark" ? "/images/logo-white.png" : "/images/logo-black.png";
+
+    return (
+        <div className="sm:mx-auto sm:w-full sm:max-w-md flex items-center justify-center space-x-2">
+            <img
+                className="p-12 text-black dark:text-white"
+                src={imageTheme}
+                alt="Logo"
+            />
+            <span className="text-sm text-muted-foreground -ml-12 -mb-12">v{env.NEXT_PUBLIC_PROJECT_VERSION}</span>
+        </div>
+    )
+}

src/components/wrappers/auth/login/login-form/login-form.tsx

@@ -1,3 +1,150 @@
+// "use client";
+//
+// import {Card, CardContent, CardHeader} from "@/components/ui/card";
+// import {FormControl, FormField, FormItem, FormLabel, FormMessage, useZodForm} from "@/components/ui/form";
+// import {Input} from "@/components/ui/input";
+// import {Form} from "@/components/ui/form";
+// import {Button} from "@/components/ui/button";
+// import {toast} from "sonner";
+// import {useMutation} from "@tanstack/react-query";
+// import {TooltipProvider} from "@/components/ui/tooltip";
+// import Link from "next/link";
+// import {PasswordInput} from "@/components/wrappers/auth/password-input/password-input";
+// import {LoginSchema, LoginType} from "@/components/wrappers/auth/login/login-form/login-form.schema";
+// import {SocialAuthButton, SocialProviderType} from "@/components/wrappers/auth/login/button-auth/social-auth-button";
+// import {signIn} from "@/lib/auth/auth-client";
+// import {useRouter} from "next/navigation";
+// import {Icon} from "@iconify/react";
+// import {useEffect, useState} from "react";
+//
+// export type loginFormProps = {
+//     defaultValues?: LoginType;
+//     authGoogleEnabled: boolean;
+//
+// };
+//
+// export const LoginForm = (props: loginFormProps) => {
+//     const router = useRouter();
+//
+//     const form = useZodForm({
+//         schema: LoginSchema,
+//     });
+//
+//     const [urlParams, setUrlParams] = useState<URLSearchParams>();
+//
+//     useEffect(() => {
+//         const urlParams = new URLSearchParams(window.location.search);
+//         console.log(urlParams);
+//         setUrlParams(urlParams);
+//         const error = urlParams.get("error");
+//         console.log(urlParams.get("redirect"));
+//         if (error?.includes("pending")) {
+//             toast.error("Your account is not active.");
+//             urlParams.delete("error");
+//             window.history.replaceState({}, document.title, window.location.pathname + "?" + urlParams.toString());
+//         }
+//     }, []);
+//
+//
+//     const mutation = useMutation({
+//         mutationFn: async (values: LoginType) => {
+//             const {error} = await signIn.email(
+//                 {
+//                     password: values.password,
+//                     email: values.email,
+//                     callbackURL: urlParams?.get("redirect") ?? "/dashboard/profile",
+//                 }, {
+//                     onSuccess: () => {
+//                         toast.success("Login success");
+//                     },
+//                 });
+//             if (error) {
+//                 toast.error(error.message);
+//             }
+//         },
+//     });
+//
+//     const availableProviders: SocialProviderType[] = [];
+//
+//     if (props.authGoogleEnabled) {
+//         availableProviders.push(
+//             {
+//                 id: "google",
+//                 name: "Google",
+//                 icon: <Icon icon={"logos:google-icon"} width="25" height="25"/>,
+//             },
+//         )
+//     }
+//
+//
+//     return (
+//         <TooltipProvider>
+//             <Card>
+//                 <CardHeader>
+//                     <div className="grid gap-2 text-center mb-2">
+//                         <h1 className="text-3xl font-bold">Login</h1>
+//                         <p className="text-balance text-muted-foreground">Enter your informations below to login</p>
+//                     </div>
+//                 </CardHeader>
+//                 <CardContent>
+//                     <Form
+//                         form={form}
+//                         className="flex flex-col gap-4"
+//                         onSubmit={async (values) => {
+//                             await mutation.mutateAsync(values);
+//                         }}
+//                     >
+//                         <FormField
+//                             control={form.control}
+//                             name="email"
+//                             defaultValue=""
+//                             render={({field}) => (
+//                                 <FormItem>
+//                                     <FormLabel>Email</FormLabel>
+//                                     <FormControl>
+//                                         <Input autoComplete="email webauthn"
+//                                                placeholder="exemple@portabase.io" {...field} />
+//                                     </FormControl>
+//                                     <FormMessage/>
+//                                 </FormItem>
+//                             )}
+//                         />
+//                         <FormField
+//                             control={form.control}
+//                             name="password"
+//                             defaultValue=""
+//                             render={({field}) => (
+//                                 <FormItem>
+//                                     <div className="flex items-center">
+//                                         <FormLabel>Password</FormLabel>
+//                                         {/*  <Link href={"/forgot-password"} className="ml-auto inline-block text-sm underline">
+//                                             Forgot your password?
+//                                         </Link>*/}
+//                                     </div>
+//                                     <FormControl>
+//                                         <PasswordInput autoComplete="current-password webauthn"
+//                                                        placeholder="Your password" {...field} />
+//                                     </FormControl>
+//                                     <FormMessage/>
+//                                 </FormItem>
+//                             )}
+//                         />
+//                         <Button>Sign in</Button>
+//                         <div className="mt-4 text-center text-sm">
+//                             Don&apos;t have an account?{" "}
+//                             <Link href={"/register"} className="underline">
+//                                 Sign up
+//                             </Link>
+//                         </div>
+//                     </Form>
+//                     <SocialAuthButton
+//                         callBackURL={urlParams?.get("redirect") ?? "/dashboard/profile"}
+//                         providers={availableProviders}/>
+//                 </CardContent>
+//             </Card>
+//         </TooltipProvider>
+//     );
+// };
 "use client";
 
 import {Card, CardContent, CardHeader} from "@/components/ui/card";
@@ -20,7 +167,6 @@ import {useEffect, useState} from "react";
 export type loginFormProps = {
     defaultValues?: LoginType;
     authGoogleEnabled: boolean;
-
 };
 
 export const LoginForm = (props: loginFormProps) => {
@@ -30,61 +176,67 @@ export const LoginForm = (props: loginFormProps) => {
         schema: LoginSchema,
     });
 
-    const [urlParams, setUrlParams] = useState<URLSearchParams>();
+    const [urlParams] = useState(() =>
+        new URLSearchParams(typeof window !== "undefined" ? window.location.search : "")
+    );
 
     useEffect(() => {
-        const urlParams = new URLSearchParams(window.location.search);
-        console.log(urlParams);
-        setUrlParams(urlParams);
         const error = urlParams.get("error");
-        console.log(urlParams.get("redirect"));
         if (error?.includes("pending")) {
             toast.error("Your account is not active.");
             urlParams.delete("error");
             window.history.replaceState({}, document.title, window.location.pathname + "?" + urlParams.toString());
         }
-    }, []);
-
+    }, [urlParams]);
 
     const mutation = useMutation({
         mutationFn: async (values: LoginType) => {
-            const {error} = await signIn.email(
-                {
-                    password: values.password,
+            try {
+                const callbackURL =
+                    urlParams.get("redirect")?.startsWith("/")
+                        ? urlParams.get("redirect")
+                        : "/dashboard/profile";
+
+                const {error} = await signIn.email({
                     email: values.email,
-                    callbackURL: urlParams?.get("redirect") ?? "/dashboard/profile",
-                }, {
-                    onSuccess: () => {
-                        toast.success("Login success");
-                        // router.push("/dashboard/profile");
-                    },
+                    password: values.password,
+                    callbackURL: callbackURL ?? "/dashboard/profile",
                 });
-            if (error) {
-                toast.error(error.message);
+
+                if (error) {
+                    toast.error(error.message);
+                } else {
+                    toast.success("Login success");
+                }
+            } catch (err) {
+                console.error(err);
+                toast.error("Unexpected client error during login");
             }
         },
+        onError: (err: any) => {
+            toast.error(err.message || "Client error");
+        },
     });
 
     const availableProviders: SocialProviderType[] = [];
 
     if (props.authGoogleEnabled) {
-        availableProviders.push(
-            {
-                id: "google",
-                name: "Google",
-                icon: <Icon icon={"logos:google-icon"} width="25" height="25"/>,
-            },
-        )
+        availableProviders.push({
+            id: "google",
+            name: "Google",
+            icon: <Icon icon="logos:google-icon" width="25" height="25"/>,
+        });
     }
 
-
     return (
         <TooltipProvider>
             <Card>
                 <CardHeader>
                     <div className="grid gap-2 text-center mb-2">
                         <h1 className="text-3xl font-bold">Login</h1>
-                        <p className="text-balance text-muted-foreground">Enter your informations below to login</p>
+                        <p className="text-balance text-muted-foreground">
+                            Enter your information below to login
+                        </p>
                     </div>
                 </CardHeader>
                 <CardContent>
@@ -103,8 +255,11 @@ export const LoginForm = (props: loginFormProps) => {
                                 <FormItem>
                                     <FormLabel>Email</FormLabel>
                                     <FormControl>
-                                        <Input autoComplete="email webauthn"
-                                               placeholder="exemple@portabase.io" {...field} />
+                                        <Input
+                                            autoComplete="email"
+                                            placeholder="example@portabase.io"
+                                            {...field}
+                                        />
                                     </FormControl>
                                     <FormMessage/>
                                 </FormItem>
@@ -118,29 +273,34 @@ export const LoginForm = (props: loginFormProps) => {
                                 <FormItem>
                                     <div className="flex items-center">
                                         <FormLabel>Password</FormLabel>
-                                        {/*  <Link href={"/forgot-password"} className="ml-auto inline-block text-sm underline">
-                                            Forgot your password?
-                                        </Link>*/}
+                                        {/* Optional forgot password link */}
                                     </div>
                                     <FormControl>
-                                        <PasswordInput autoComplete="current-password webauthn"
-                                                       placeholder="Your password" {...field} />
+                                        <PasswordInput
+                                            autoComplete="current-password"
+                                            placeholder="Your password"
+                                            {...field}
+                                        />
                                     </FormControl>
                                     <FormMessage/>
                                 </FormItem>
                             )}
                         />
-                        <Button>Sign in</Button>
+                        <Button type="submit" disabled={mutation.isPending}>
+                            {mutation.isPending ? "Signing in..." : "Sign in"}
+                        </Button>
                         <div className="mt-4 text-center text-sm">
                             Don&apos;t have an account?{" "}
-                            <Link href={"/register"} className="underline">
+                            <Link href="/register" className="underline">
                                 Sign up
                             </Link>
                         </div>
                     </Form>
+
                     <SocialAuthButton
-                        callBackURL={urlParams?.get("redirect") ?? "/dashboard/profile"}
-                        providers={availableProviders}/>
+                        callBackURL={urlParams.get("redirect") ?? "/dashboard/profile"}
+                        providers={availableProviders}
+                    />
                 </CardContent>
             </Card>
         </TooltipProvider>

src/components/wrappers/common/button/back-button.tsx

@@ -0,0 +1,18 @@
+"use client";
+import React from "react";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+
+type BackButtonProps = React.ComponentProps<typeof Button> & {
+    children: React.ReactNode;
+};
+
+export default function BackButton({ children, ...props }: BackButtonProps) {
+    const router = useRouter();
+
+    return (
+        <Button onClick={() => router.back()} aria-label={children?.toString()} {...props}>
+            {children}
+        </Button>
+    );
+}

src/components/wrappers/dashboard/admin/tabs/admin-user-tab/sessions/table-columns.tsx

@@ -19,10 +19,6 @@ export const sessionsColumns: ColumnDef<Session>[] = [
             return timeAgo(row.original.expiresAt);
         },
     },
-    {
-        accessorKey: "ipAddress",
-        header: "IP Address",
-    },
     {
         id: "device",
         header: "Device",

src/components/wrappers/dashboard/common/sidebar/app-sidebar.tsx

@@ -10,15 +10,16 @@ import {SidebarMenuCustomMain} from "@/components/wrappers/dashboard/common/side
 import {SideBarFooterCredit} from "@/components/wrappers/dashboard/common/sidebar/side-bar-footer-credit";
 import {OrganizationCombobox} from "@/components/wrappers/dashboard/organization/organization-combobox";
 import {LoggedInButton} from "@/components/wrappers/dashboard/common/logged-in/logged-in-button";
+import {env} from "@/env.mjs";
 
 export function AppSidebar() {
-
+    const projectName = env.PROJECT_NAME;
     return (
         <Sidebar collapsible="icon">
             <SidebarHeader>
                 <SidebarMenu>
                     <SidebarMenuItem>
-                        <SidebarLogo/>
+                        <SidebarLogo projectName={projectName ?? "Portabase"}/>
                     </SidebarMenuItem>
                     <SidebarMenuItem>
                         <OrganizationCombobox/>
@@ -32,10 +33,10 @@ export function AppSidebar() {
 
             <SidebarMenu className="mb-2">
                 <SidebarMenuItem>
-                    <LoggedInButton />
+                    <LoggedInButton/>
                 </SidebarMenuItem>
             </SidebarMenu>
-            <SideBarFooterCredit />
+            <SideBarFooterCredit/>
         </Sidebar>
     );
 }

src/components/wrappers/dashboard/common/sidebar/logo-sidebar.tsx

@@ -2,12 +2,13 @@
 
 import { useSidebar } from "@/components/ui/sidebar";
 import Link from "next/link";
-import { env } from "@/env.mjs";
 import { useTheme } from "next-themes";
 import Image from "next/image";
 import { useEffect, useState } from "react";
 
-export const SidebarLogo = () => {
+export const SidebarLogo = ({projectName}: {
+    projectName: string;
+}) => {
     const { state, isMobile } = useSidebar();
     const { resolvedTheme } = useTheme();
 
@@ -28,7 +29,7 @@ export const SidebarLogo = () => {
                     <Image
                         loading="eager"
                         src={"/images/logo.png"}
-                        alt={`Logo ${env.NEXT_PUBLIC_PROJECT_NAME}`}
+                        alt={`Logo ${projectName}`}
                         className="h-10 w-10 object-contain"
                         height={10}
                         width={10}
@@ -38,7 +39,7 @@ export const SidebarLogo = () => {
                         <Image
                             loading="eager"
                             src={imageTheme}
-                            alt={`Logo ${env.NEXT_PUBLIC_PROJECT_NAME}`}
+                            alt={`Logo ${projectName}`}
                             className="object-contain"
                             width={190}
                             height={90}

src/env.mjs

@@ -6,12 +6,15 @@ const {version} = packageJson;
 
 export const env = createEnv({
     server: {
-        NODE_ENV: z.enum(["development", "production"]).optional(),
-        DATABASE_URL: z.string().url().optional(),
-        NEXT_PUBLIC_PROJECT_NAME: z.string().optional(),
-        NEXT_PUBLIC_PROJECT_DESCRIPTION: z.string().optional(),
-        NEXT_PUBLIC_PROJECT_URL: z.string().optional(),
         NEXT_PUBLIC_PROJECT_VERSION: z.string().optional(),
+
+        NODE_ENV: z.enum(["development", "production"]).optional(),
+
+        DATABASE_URL: z.string().url().optional(),
+
+        PROJECT_NAME: z.string().optional(),
+        PROJECT_DESCRIPTION: z.string().optional(),
+        PROJECT_URL: z.string().optional(),
         PROJECT_SECRET: z.string().optional(),
 
         SMTP_PASSWORD: z.string().optional(),
@@ -38,17 +41,15 @@ export const env = createEnv({
             .default(process.env.NODE_ENV === "production" ? "0 7 * * *" : "* * * * *"),
     },
     client: {
-        NEXT_PUBLIC_PROJECT_NAME: z.string().optional(),
-        NEXT_PUBLIC_PROJECT_DESCRIPTION: z.string().optional(),
-        NEXT_PUBLIC_PROJECT_URL: z.string().optional(),
         NEXT_PUBLIC_PROJECT_VERSION: z.string().optional(),
 
     },
     runtimeEnv: {
-        NEXT_PUBLIC_PROJECT_NAME: process.env.NEXT_PUBLIC_PROJECT_NAME,
-        NEXT_PUBLIC_PROJECT_DESCRIPTION: process.env.NEXT_PUBLIC_PROJECT_DESCRIPTION,
-        NEXT_PUBLIC_PROJECT_URL: process.env.NEXT_PUBLIC_PROJECT_URL,
         NEXT_PUBLIC_PROJECT_VERSION: version || "Unknown Version",
+
+        PROJECT_NAME: process.env.PROJECT_NAME,
+        PROJECT_DESCRIPTION: process.env.PROJECT_DESCRIPTION,
+        PROJECT_URL: process.env.PROJECT_URL,
         PROJECT_SECRET: process.env.PROJECT_SECRET,
 
         DATABASE_URL: process.env.DATABASE_URL,

src/lib/auth/auth-client.ts

@@ -1,12 +1,20 @@
+"use client"
 import {createAuthClient} from "better-auth/react";
 
 import {adminClient, inferAdditionalFields, organizationClient} from "better-auth/client/plugins";
-import {env} from "@/env.mjs";
 import {ac, user, admin as adminRole, pending, superadmin, orgAdmin, orgMember, orgOwner} from "./permissions";
 import {auth} from "@/lib/auth/auth";
 
+const baseURL =
+    typeof window === "undefined"
+        ? process.env.PROJECT_URL // server side
+        : "";
+
+const res = await fetch(`${baseURL}/api/config`);
+const { PROJECT_URL } = await res.json();
+
 export const authClient = createAuthClient({
-    baseURL: env.NEXT_PUBLIC_PROJECT_URL,
+    baseURL: PROJECT_URL,
     plugins: [
         organizationClient({
             ac,

src/lib/auth/auth.ts

@@ -191,7 +191,7 @@ export const auth = betterAuth({
             },
         },
     },*/
-    trustedOrigins: [env.NEXT_PUBLIC_PROJECT_URL!, "http://app"],
+    trustedOrigins: [env.PROJECT_URL!, "http://app"],
 });
 
 /*export const signUpUser = async (email: string, password: string, name: string) => {