Authentication with Credentials is working and setup, same for OAuth with Google.

app/(auth)/layout.tsx

@@ -1,27 +1,37 @@
 import {LayoutAdmin} from "@/components/layout";
 import Image from 'next/image';
+import {currentUser, requiredCurrentUser} from "@/auth/current-user";
+import {redirect} from "next/navigation";
 
-export default function Layout({ children }: { children: React.ReactNode }) {
-    return(
+export default async function Layout({children}: { children: React.ReactNode }) {
+
+    const user = await currentUser()
+
+    if(user){
+        redirect('/dashboard')
+    }
+
+    return (
         <LayoutAdmin>
-
-            <div className="w-full h-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]">
+            <div
+                // className="w-full h-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]"
+                className="w-full h-full grid "
+            >
                 <div className="flex items-center justify-center py-12">
                     {children}
                 </div>
-                <div className="hidden bg-muted lg:block ">
-                    <img
-                        src="/background.jpg"
-                        alt="Image"
-                        width="1920"
-                        height="1080"
-                        className="h-full w-full object-cover dark:brightness-[0.5] dark:grayscale"
-                    />
-                    <div className="absolute bottom-6 right-6 z-10">
-                        <Image src="/logo-inverse-title-white.png" alt="Logo Portabase" width={250} height={250} />
-                    </div>
-                </div>
-
+                {/*<div className="hidden bg-muted lg:block ">*/}
+                {/*    <img*/}
+                {/*        src="/background.jpg"*/}
+                {/*        alt="Image"*/}
+                {/*        width="1920"*/}
+                {/*        height="1080"*/}
+                {/*        className="h-full w-full object-cover dark:brightness-[0.5] dark:grayscale"*/}
+                {/*    />*/}
+                {/*    <div className="absolute bottom-6 right-6 z-10">*/}
+                {/*        <Image src="/logo-inverse-title-white.png" alt="Logo Portabase" width={250} height={250}/>*/}
+                {/*    </div>*/}
+                {/*</div>*/}
             </div>
         </LayoutAdmin>
     )

app/(auth)/login/page.tsx

@@ -1,91 +1,27 @@
-import {PageParams} from "@/types/next";
-import {Label} from "@/components/ui/label"
-import {Input} from "@/components/ui/input"
-import Link from "next/link";
-import {Button} from "@/components/ui/button";
-import {LayoutAdmin} from "@/components/layout";
-import {signIn} from "@/auth/auth";
-import {redirect} from "next/navigation";
-import {AuthError} from "@auth/core/errors";
+"use client"
+import {useSearchParams} from "next/navigation";
+import {LoginForm} from "@/components/wrappers/Auth/Login/LoginForm/LoginForm";
+import {useEffect, useRef} from "react";
+import {toast} from "sonner";
 
-
-
-export default async function SignInPage(props: {
+export default function SignInPage(props: {
     searchParams: { callbackUrl: string | undefined }
 }) {
 
-    const SIGNIN_ERROR_URL = "localhost:8887"
+    const searchParams = useSearchParams();
+    const error = searchParams.get("error");
+    const isFirstRender = useRef(true);
+
+    useEffect(() => {
+        if (isFirstRender.current && error) {
+            toast.error("Error occurred.");
+            isFirstRender.current = false;
+        }
+    }, [error]);
 
     return (
-        // <div className="mx-auto grid w-[350px] gap-6">
-        //     <div className="grid gap-2 text-center">
-        //         <h1 className="text-3xl font-bold">Login</h1>
-        //         <p className="text-balance text-muted-foreground">
-        //             Enter your email and password below to login to your account
-        //         </p>
-        //     </div>
-        //     <div className="grid gap-4">
-        //         <div className="grid gap-2">
-        //             <Label htmlFor="email">Email</Label>
-        //             <Input
-        //                 id="email"
-        //                 type="email"
-        //                 placeholder="exemple@portabase.com"
-        //                 required
-        //             />
-        //         </div>
-        //         <div className="grid gap-2">
-        //             <div className="flex items-center">
-        //                 <Label htmlFor="password">Password</Label>
-        //                 <Link
-        //                     href="/forgot-password"
-        //                     className="ml-auto inline-block text-sm underline"
-        //                 >
-        //                     Forgot your password?
-        //                 </Link>
-        //             </div>
-        //             <Input id="password" type="password" required/>
-        //         </div>
-        //         <Button type="submit" className="w-full">
-        //             Login
-        //         </Button>
-        //     </div>
-        //     <div className="mt-2 text-center text-sm">
-        //         Don&apos;t have an account?{" "}
-        //         <Link href="#" className="underline">
-        //             Sign up
-        //         </Link>
-        //     </div>
-        // </div>
-        <div className="flex flex-col gap-2">
-            <form
-                action={async (formData) => {
-                    "use server"
-                    console.log(formData)
-
-                    try {
-                        console.log(formData)
-                        await signIn("credentials", formData)
-                    } catch (error) {
-                        console.log("error")
-                        // if (error instanceof AuthError) {
-                        //     return redirect(`${SIGNIN_ERROR_URL}?error=${error.type}`)
-                        // }
-                        // throw error
-                    }
-                }}
-            >
-                <label htmlFor="email">
-                    Email
-                    <input name="email" id="email"/>
-                </label>
-                <label htmlFor="password">
-                    Password
-                    <input name="password" id="password"/>
-                </label>
-                <input type="submit" value="Sign In"/>
-            </form>
-
+        <div className="mx-auto grid w-[350px] gap-6">
+            <LoginForm/>
         </div>
     )
 }

app/(auth)/register/page.tsx

@@ -1,18 +1,12 @@
+"use client"
+
 import {PageParams} from "@/types/next";
-import {Label} from "@/components/ui/label"
-import {Input} from "@/components/ui/input"
-import Link from "next/link";
-import {Button} from "@/components/ui/button";
-import {LayoutAdmin} from "@/components/layout";
 import {RegisterForm} from "@/components/wrappers/Auth/Register/RegisterForm/RegisterForm";
 
-
-export default async function RoutePage(props: PageParams<{}>) {
-
+export default function RoutePage(props: PageParams<{}>) {
     return (
         <div className="mx-auto grid w-[350px] gap-6">
             <RegisterForm/>
         </div>
-
     )
 }

app/(customer)/dashboard/layout.tsx

@@ -1,45 +1,20 @@
 import {SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
 import {AppSidebar} from "@/components/wrappers/SideBar/app-sidebar";
-import {
-    Breadcrumb,
-    BreadcrumbItem,
-    BreadcrumbLink,
-    BreadcrumbList, BreadcrumbPage,
-    BreadcrumbSeparator
-} from "@/components/ui/breadcrumb";
-import {Separator} from "@/components/ui/separator";
+import {currentUser} from "@/auth/current-user";
+import {redirect} from "next/navigation";
+
+
+export default async function Layout({children}: { children: React.ReactNode }) {
+
+    const user = await currentUser()
+
+    if (!user) {
+        redirect('/login')
+    }
 
-export default function Layout({ children }: { children: React.ReactNode }) {
     return (
         <SidebarProvider>
             <AppSidebar/>
-            {/*<SidebarInset>*/}
-            {/*    <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">*/}
-            {/*        <SidebarTrigger className="-ml-1" />*/}
-            {/*        <Separator orientation="vertical" className="mr-2 h-4" />*/}
-            {/*        <Breadcrumb>*/}
-            {/*            <BreadcrumbList>*/}
-            {/*                <BreadcrumbItem className="hidden md:block">*/}
-            {/*                    <BreadcrumbLink href="#">*/}
-            {/*                        Building Your Application*/}
-            {/*                    </BreadcrumbLink>*/}
-            {/*                </BreadcrumbItem>*/}
-            {/*                <BreadcrumbSeparator className="hidden md:block" />*/}
-            {/*                <BreadcrumbItem>*/}
-            {/*                    <BreadcrumbPage>Data Fetching</BreadcrumbPage>*/}
-            {/*                </BreadcrumbItem>*/}
-            {/*            </BreadcrumbList>*/}
-            {/*        </Breadcrumb>*/}
-            {/*    </header>*/}
-            {/*    <div className="flex flex-1 flex-col gap-4 p-4">*/}
-            {/*        <div className="grid auto-rows-min gap-4 md:grid-cols-3">*/}
-            {/*            <div className="aspect-video rounded-xl bg-muted/50" />*/}
-            {/*            <div className="aspect-video rounded-xl bg-muted/50" />*/}
-            {/*            <div className="aspect-video rounded-xl bg-muted/50" />*/}
-            {/*        </div>*/}
-            {/*        <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />*/}
-            {/*    </div>*/}
-            {/*</SidebarInset>*/}
             <main>
                 <SidebarTrigger/>
                 {children}

app/(customer)/dashboard/page.tsx

@@ -5,7 +5,6 @@ export default async function RoutePage(props: PageParams<{}>) {
 
     return(
         <div>
-
         <h1>Ok</h1>
             <Button>Button</Button>
         </div>

app/(landing)/page.tsx

@@ -1,18 +1,15 @@
-import Home from "./home/page";
 import {redirect} from "next/navigation";
 import {currentUser} from "@/auth/current-user";
 
 
 
 export default async function Index() {
-
     const user = await currentUser()
-    console.log(user)
     if (user) {
         redirect("/dashboard")
     }
     redirect("/login")
-
+    //Do not delete
     // return (
     //     <Home/>
     // );

app/error/page.tsx

@@ -0,0 +1,38 @@
+"use client"
+
+import { useSearchParams } from "next/navigation"
+
+enum Error {
+    Configuration = "Configuration",
+}
+
+const errorMap = {
+    [Error.Configuration]: (
+        <p>
+            There was a problem when trying to authenticate. Please contact us if this
+            error persists. Unique error code:{" "}
+            <code className="rounded-sm bg-slate-100 p-1 text-xs">Configuration</code>
+        </p>
+    ),
+}
+
+export default function AuthErrorPage() {
+    const search = useSearchParams()
+    const error = search.get("error") as Error
+
+    return (
+        <div className="flex h-screen w-full flex-col items-center justify-center">
+            <a
+                href="#"
+                className="block max-w-sm rounded-lg border border-gray-200 bg-white p-6 text-center shadow hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700"
+            >
+                <h5 className="mb-2 flex flex-row items-center justify-center gap-2 text-xl font-bold tracking-tight text-gray-900 dark:text-white">
+                    Something went wrong
+                </h5>
+                <div className="font-normal text-gray-700 dark:text-gray-400">
+                    {errorMap[error] || "Please contact us if this error persists."}
+                </div>
+            </a>
+        </div>
+    )
+}

app/layout.tsx

@@ -19,12 +19,11 @@ export default function RootLayout({
 }>) {
     return (
         <html lang="en">
-        <body className={cn(inter.className, "h-full")}>
-
-        <Providers>
-            {children}
-        </Providers>
-        </body>
+            <body className={cn(inter.className, "h-full")}>
+                <Providers>
+                    {children}
+                </Providers>
+            </body>
         </html>
     );
 }