DEV Community

Cover image for Check Login Using Middleware With NextJS 13
Hòa Nguyễn Coder
Hòa Nguyễn Coder

Posted on

Check Login Using Middleware With NextJS 13

#nextjs #javascript #webdev #react

Create a Middleware that checks user login. Here, I have already prepared a BackEnd processing server .
So in this article, we only need to fetch the api and process the returned value. If you have not seen the previous article about Middleware, you can review this link: Create A Middleware In NextJS 13 - hoanguyenit.com
*CREATE A API FOLDER IN PROJECT *

  • _app/api/login/route.ts _ In this route.ts file , we will send ( username , _password _) to the backend server to check login. If correct, access_token will be returned
 import { NextRequest, NextResponse } from "next/server"; type RequestBody = { email: string; password: string; }; export async function POST(request: NextRequest) { const body: RequestBody = await request.json(); const value = { email: body.email, password: body.password, }; const res = await fetch("https://127.0.0.1:8000/api/auth/login", { method: "POST", mode: "cors", cache: "no-cache", credentials: "same-origin", headers: { "Content-Type": "application/json", }, body: JSON.stringify(value), }); const data = await res.json(); if (data.success) { // Then set a cookie const response = NextResponse.json( { success: data.success, }, { status: 200 } ); response.cookies.set({ name: "login", value: "true", httpOnly: true, }); response.cookies.set({ name: "access_token", value: data.access_token, //token value here httpOnly: true, maxAge: data.expires_in, }); return response; } return new NextResponse(null, { status: 404, statusText: "Bad request", headers: { "Content-Type": "text/plain", }, }); }
Enter fullscreen mode Exit fullscreen mode

The backend will return data like ( access_token , expires_in ), we can use this data to store it as cookies . 

 const response = NextResponse.json( { success: data.success, }, { status: 200 } ); response.cookies.set({ name: "login", value: "true", httpOnly: true, }); response.cookies.set({ name: "access_token", value: data.access_token, //token value here httpOnly: true, maxAge: data.expires_in, });
Enter fullscreen mode Exit fullscreen mode

Check Login using Middleware with NextJS 13 - hoanguyenit.com

CREATE A MIDDLEWARE

  • middleware.ts : used to check access_token , whether it exists or not by using request.cookie.get('access_token')
 import { NextRequest, NextResponse } from "next/server"; const allow_origin_lists :string[] = process.env.NODE_ENV==='production'?['https://hoanguyenit.com','https://100daysofcode.hoanguyenit.com']: ['https://www.google.com','http://localhost:3000','http://127.0.0.1:3000'] export default function middleware(request: NextRequest){ const login = request.cookies.get("login"); const check_login= !login?.value? false: true const access_token = request.cookies.get("access_token"); const check_token = !access_token?.value? false: true const origin: string | null = request.headers.get('origin') const res = NextResponse.next() // console.log(request.nextUrl.pathname); const res_404 = new NextResponse(null, { status: 404, statusText:"Bad request", headers:{ 'Content-Type':'text/plain' } }) if(origin && !allow_origin_lists.includes(origin)){ return res_404; } if(!check_login && !check_token){ return res_404; } console.log("origin",origin); res.headers.append('Access-Control-Allow-Credentials', "true") res.headers.append('Access-Control-Allow-Origin', origin) res.headers.append('Access-Control-Allow-Methods', 'GET,DELETE,PATCH,POST,PUT') res.headers.append( 'Access-Control-Allow-Headers', 'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version' ) return res; } export const config = { matcher:[ '/api/categories:path*', '/api/post:path*', '/api/user:path*' ] }
Enter fullscreen mode Exit fullscreen mode

In the above code, we check the values ​​in the cookie that we saved in the login section above 

 const login = request.cookies.get("login"); const check_login= !login?.value? false: true const access_token = request.cookies.get("access_token"); const check_token = !access_token?.value? false: true //nếu không đúng trả về status 404 if(!check_login && !check_token){ return res_404; }
Enter fullscreen mode Exit fullscreen mode

Here, we need middleware to request the following api routes:

 export const config = { matcher:[ '/api/categories:path*', '/api/post:path*', '/api/user:path*' ] }
Enter fullscreen mode Exit fullscreen mode

Okay so we have created Middleware.

Now we need to create a user api folder to get that user's information. If everything in the middleware is correct, it will allow us to call api/user/

  • app/api/user/route.ts
 import { NextRequest, NextResponse } from 'next/server' type ResponseBody = { errors: { message: string }[] } | { username: string }; async function getUserByValidSessionToken(token : string){ const res = await fetch('http://127.0.0.1:8000/api/auth/user-profile',{ headers: { "Content-Type": "application/json", "Authorization":"Bearer "+token }, }); const data = await res.json(); return { username: data.name } } export async function GET( request: NextRequest ): Promise<NextResponse<ResponseBody>> { const token = request.cookies.get("access_token"); const user = !token?.value ? undefined : await getUserByValidSessionToken(token.value); if (!user) { return NextResponse.json({ errors: [{ message: "User not found by session token" }], }); } return NextResponse.json({ username: user.username, });
Enter fullscreen mode Exit fullscreen mode

Get the access_token value in the cookie 

 const token = request.cookies.get("access_token"); const user = !token?.value ? undefined : await getUserByValidSessionToken(token.value);
Enter fullscreen mode Exit fullscreen mode

Write fucntion fetch api + token 

 const res = await fetch('http://127.0.0.1:8000/api/auth/user-profile',{ headers: { "Content-Type": "application/json", "Authorization":"Bearer "+token }, });
Enter fullscreen mode Exit fullscreen mode

Create A Middleware In NextJS 13 - hoanguyenit.com
Okay that's it, you can develop further

Top comments (0)