Add Auth & Protect Routes in React in 3 Minutes (Kinde)

React native please

Awesome video ❤🎉

Can you make a tanstack router video

or just write your own auth logic. It's simple. And you will learn something valuable about it.

Thanks for the video! This would be really good for OAuth, as you've demonstrated.

My bro said don't learn web development, ai will replace coding jobs and stuff making me anxious and stuff, and i just started with web development path, idk what to do please guide me about this Ai taking everything like what is it i just joined in man 😢😢😢

Howdy, that's straightforwards compared to writing the base yourself. However can this now be expanded upon further to allow say different user levels of access, any subscription values etc..? Matt

This is simple...please make video on how to integrate this with backend node/express server with protected api end point (authorisation)....i see no resources for that

that was pretty informative. Learnt something today. 🎉

import { auth } from "@/auth";
// import { signOut } from "next-auth/react";
import { authRoutes, apiAuthPrefix, DEFAULT_LOGGIN_REDIRECT } from "@/routes";
import { notFound, redirect } from "next/navigation";
import { NextResponse } from "next/server";
import { signOut } from "next-auth/react";

export default auth(async (req) => {
const isLoggined = !!req.auth;
const { nextUrl } = req;
const userPagePermission = ["main", "sale_a", "users", "my_debts"];

const isApiAuthRoute = nextUrl.pathname.startsWith(apiAuthPrefix);
const isAuthRoute = authRoutes.includes(nextUrl.pathname);
const isAccess = userPagePermission.includes(nextUrl.pathname.split("/")[1]);

if (isApiAuthRoute) {
return;
}
if (isAuthRoute) {
if (isLoggined) {
return Response.redirect(new URL(DEFAULT_LOGGIN_REDIRECT, nextUrl));
}
return;
}
// if (isAccess) {
// console.log("access it");
// return;
// }
// if (!isAccess) {
// // signOut();
// // redirect("/not-access");
// // console.log("not access");
// }

if (!isLoggined) {
return NextResponse.redirect(new URL("/login", req.url));
}
return;
});

// Optionally, don't invoke Middleware on some paths
export const config = {
matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
};...................................................this is my Middleware code in the condition when !isAccess true clear the session-token i save it when user login it when clear the session it will return the user to login automaticlly , but i do not know how do that the both method signOut of Auth like signOut of server side or Client side not working in the condition !isAccess give me the sloution please ? i use Auth js the version 5 beta ..........i appreciate for helping me ❤

nice video!

i swear this was the easiest authentication in react i have ever seen

import { auth } from "@/auth";
import { authRoutes, apiAuthPrefix, DEFAULT_LOGGIN_REDIRECT } from "@/routes";
import { notFound, redirect } from "next/navigation";
import { NextResponse } from "next/server";

export default auth((req) => {
const isLoggined = !!req.auth;
const { nextUrl } = req;
const userPagePermission = ["main", "sale_a", "users", "my_debts"];
const isApiAuthRoute = nextUrl.pathname.startsWith(apiAuthPrefix);
const isAuthRoute = authRoutes.includes(nextUrl.pathname);
const isAccess = userPagePermission.includes(nextUrl.pathname.split("/")[1]);

if (isApiAuthRoute) {
return;
}
if (isAuthRoute) {
if (isLoggined) {
return Response.redirect(new URL(DEFAULT_LOGGIN_REDIRECT, nextUrl));
}
return;
}

if (!isLoggined) {
return NextResponse.redirect(new URL("/login", req.url));
}
return;
});

export const config = {
matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
};
..............................this is my middleware code i use auth js the version 5 beta how we can do that if the isAccess is not true logout the user by clear the session like use the signOut server side function after clear the session automaticaly user redirect to login page ? how we can implemnet the signOut if isAccess false ?

Thank you, I just wanted to implement this in my project with next, a hug and these videos are appreciated <3

Is there any git repository to learn reactjs (professional) with redux, middleware.

This is pretty useful if you already know how authentication works and dont want to hassle yourself coding it by scratch. Thanks for the video!

Brilliant pitch, great knowledge

i don't know if i missed a part of the video or not but when i tried this when ever i refresh the page or go to diffrent page i lose the authentication and have to relogin how do i keep the user logged in ?