feat: login/logout functionality implemnted

Author: Harshit Yadav

README.md

@@ -205,4 +205,90 @@ export const config = {
 - this file will contain all types of routes
 
 44. Edit middleware.ts file
-    // cuurently here : 2:32:14
+
+    - add routes condition in `middleware.ts` file
+
+45. Do valdiations in `auth.config.ts` file
+
+46. Edit `auth.ts` file
+
+```
+export const {
+  handlers: { GET, POST },
+  auth,
+  signIn,
+  signOut,
+} = NextAuth({
+  adapter: PrismaAdapter(db), // prisma adapter is supported on non edge
+  session: { strategy: "jwt" },
+  ...authConfig,
+});
+
+```
+
+47. Implement functionality in `login.ts` file
+
+```
+"use server"; // necessary in every auth action
+
+import * as z from "zod";
+import { LoginSchema } from "@/schema";
+import { signIn } from "@/auth";
+import { DEFAULT_LOGIN_REDIRECT } from "@/route";
+import { AuthError } from "next-auth";
+
+export const Login = async (values: z.infer<typeof LoginSchema>) => {
+  const validatedFields = LoginSchema.safeParse(values); // valdiating the input values
+  if (!validatedFields.success) {
+    return { error: "Invalid fields! " };
+  }
+  const { email, password } = validatedFields.data;
+  try {
+    await signIn("credentials", {
+      email,
+      password,
+      redirectTo: DEFAULT_LOGIN_REDIRECT,
+    });
+  } catch (error) {
+    if (error instanceof AuthError) {
+      switch (error.type) {
+        case "CredentialsSignin":
+          return { error: "Invalid credentials!" };
+        default:
+          return { error: "Something went wrong!" };
+      }
+    }
+    throw error;
+  }
+};
+
+```
+
+48. Go to settings page and add logout button, and its functionality in `settings.tsx` file
+
+```
+import { auth, signOut } from '@/auth'
+import React from 'react'
+
+const Settings = async () => {
+    const user = await auth()
+    return (
+        <div>
+            {JSON.stringify(user)}
+            <form action={async () => {
+                'use server'
+                await signOut()
+            }}>
+                <button type='submit'>
+                    Singout
+                </button>
+            </form>
+        </div>
+    )
+}
+
+export default Settings
+
+```
+
+#### Login/Logout completed succesfully

actions/auth/login.ts

@@ -1,5 +1,32 @@
 "use server"; // necessary in every auth action
 
-export const Login = (values: any) => {
-  console.log(values);
+import * as z from "zod";
+import { LoginSchema } from "@/schema";
+import { signIn } from "@/auth";
+import { DEFAULT_LOGIN_REDIRECT } from "@/route";
+import { AuthError } from "next-auth";
+
+export const Login = async (values: z.infer<typeof LoginSchema>) => {
+  const validatedFields = LoginSchema.safeParse(values); // valdiating the input values
+  if (!validatedFields.success) {
+    return { error: "Invalid fields! " };
+  }
+  const { email, password } = validatedFields.data;
+  try {
+    await signIn("credentials", {
+      email,
+      password,
+      redirectTo: DEFAULT_LOGIN_REDIRECT,
+    });
+  } catch (error) {
+    if (error instanceof AuthError) {
+      switch (error.type) {
+        case "CredentialsSignin":
+          return { error: "Invalid credentials!" };
+        default:
+          return { error: "Something went wrong!" };
+      }
+    }
+    throw error;
+  }
 };

actions/auth/register.ts

@@ -2,7 +2,7 @@
 
 import { RegisterSchema } from "@/schema";
 import * as z from "zod";
-import bcrypt from "bcrypt";
+import bcrypt from "bcryptjs";
 import { db } from "@/lib/database.connection";
 import { getUserByEmail } from "@/lib/actions/user.action";
 

app/(protected)/settings/page.tsx

@@ -1,11 +1,19 @@
-import { auth } from '@/auth'
+import { auth, signOut } from '@/auth'
 import React from 'react'
 
 const Settings = async () => {
     const user = await auth()
     return (
         <div>
             {JSON.stringify(user)}
+            <form action={async () => {
+                'use server'
+                await signOut()
+            }}>
+                <button type='submit'>
+                    Singout
+                </button>
+            </form>
         </div>
     )
 }

app/layout.tsx

@@ -18,5 +18,6 @@ export default function RootLayout({
     <html lang="en">
       <body className={inter.className}>{children}</body>
     </html>
+
   )
 }

auth.config.ts

@@ -1,11 +1,33 @@
 // * This file is used to trigger the middleware on the edge
 // * That is why we use auth.ts and auth.config.ts as seprate files
 
-
-import GitHub from "next-auth/providers/github";
+import bcrypt from "bcryptjs";
+import Credentials from "next-auth/providers/credentials";
 
 import type { NextAuthConfig } from "next-auth";
+import { LoginSchema } from "./schema";
+import { getUserByEmail } from "./lib/actions/user.action";
 
 export default {
-  providers: [GitHub],
+  providers: [
+    Credentials({
+      async authorize(credentials) {
+        const validatedFields = LoginSchema.safeParse(credentials); // again doing validation
+        if (validatedFields.success) {
+          // if validation is successfull
+          const { email, password } = validatedFields.data;
+
+          const user = await getUserByEmail(email); // checking if user is present in database
+          if (!user || !user.password) return null; // password will be null when user has registered using google or github
+
+          const passwordsMatch = await bcrypt.compare(password, user.password); // comparing the hashed password
+
+          if (passwordsMatch) {
+            return user;
+          }
+        }
+        return null;
+      },
+    }),
+  ],
 } satisfies NextAuthConfig;

auth.ts

@@ -6,6 +6,8 @@ import { PrismaAdapter } from "@auth/prisma-adapter";
 export const {
   handlers: { GET, POST },
   auth,
+  signIn,
+  signOut,
 } = NextAuth({
   adapter: PrismaAdapter(db), // prisma adapter is supported on non edge
   session: { strategy: "jwt" },

components/auth/login-form.tsx

@@ -1,5 +1,5 @@
 'use client'
-import React from 'react'
+import React, { startTransition, useState } from 'react'
 import { CardWrapper } from './card-wrapper'
 import { Input } from "@/components/ui/input";
 import {
@@ -21,6 +21,9 @@ import { FormError } from '../form-error';
 import { Login } from '@/actions/auth/login';
 const LoginForm = () => {
 
+    const [error, setError] = useState<string | undefined>("");
+    const [success, setSuccess] = useState<string | undefined>("");
+
     const form = useForm<z.infer<typeof LoginSchema>>({
         resolver: zodResolver(LoginSchema),
         defaultValues: {
@@ -30,8 +33,23 @@ const LoginForm = () => {
     })
 
     const onSubmit = (values: z.infer<typeof LoginSchema>) => {
-        Login(values)
-        console.log(values)
+        setError("");
+        setSuccess("");
+        startTransition(() => {
+            Login(values)
+                .then((data) => {
+                    if (data?.error) {
+                        form.reset();
+                        setError(data?.error);
+                    }
+
+                    if (data?.success) {
+                        form.reset();
+                        setSuccess(data.success);
+                    }
+                })
+                .catch(() => setError("Something went wrong"));
+        });
     }
 
     return (
@@ -88,8 +106,8 @@ const LoginForm = () => {
                             </FormItem>
                         )}
                     />
-                    <FormSuccess message="Login completed" />
-                    <FormError message="Invalid email" />
+                    <FormSuccess message={success} />
+                    <FormError message={error} />
 
 
                     <Button

delete.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    
+</body>
+</html>

middleware.ts

@@ -11,19 +11,31 @@ import {
 const { auth } = NextAuth(authConfig);
 
 export default auth((req) => {
-  // req.auth
   const { nextUrl } = req;
-  const isLoggeedIn = !!req.auth;
+  const isLoggedIn = !!req.auth;
 
   const isPublicRoute = publicRoutes.includes(nextUrl.pathname);
   const isAuthRoute = authRoutes.includes(nextUrl.pathname);
   const isApiAuthRoute = nextUrl.pathname.startsWith(apiAuthPrefix);
 
+  // order of if condition matters here
   if (isApiAuthRoute) {
     return null;
   }
 
-  // TODO ; start from here
+  if (isAuthRoute) {
+    if (isLoggedIn) {
+      return Response.redirect(new URL(DEFAULT_LOGIN_REDIRECT, nextUrl));
+    } else {
+      return null;
+    }
+  }
+
+  if (!isLoggedIn && !isPublicRoute) {
+    return Response.redirect(new URL("/auth/login", nextUrl));
+  }
+
+  return null;
 });
 
 // Optionally, don't invoke Middleware on some paths