LogOut route (my first app)
Unanswered
American black bear posted this in #help-forum
American black bearOP
Hello, this is my first project using next.js so....
I want the logout button to go to the root '/' page and to have the right url but instead it's redirecting to /login page and not changing the url (it stays /dashboard)
What am I doing wrong? 🥲
auth.ts:
auth.config.ts:
I want the logout button to go to the root '/' page and to have the right url but instead it's redirecting to /login page and not changing the url (it stays /dashboard)
What am I doing wrong? 🥲
auth.ts:
export const { auth, signIn, signOut } = NextAuth({
...authConfig,
providers: [
Credentials({
async authorize(credentials) {
const parsedCredentials = z
.object({ email: z.string().email(), password: z.string().min(6) })
.safeParse(credentials);
if (parsedCredentials.success) {
const { email, password } = parsedCredentials.data;
const user = await getUser(email);
if (!user) return null;
const passwordsMatch = await bcrypt.compare(password, user.password);
if (passwordsMatch){
return user;
}
}
console.log('Invalid credentials');
return null;
},
}),
],
});auth.config.ts:
export const authConfig = {
pages: {
signIn: '/login',
signOut: '/'
},
callbacks: {
authorized({ auth, request: { nextUrl } }) {
const isLoggedIn = !!auth?.user;
const isOnDashboard = nextUrl.pathname.startsWith('/dashboard');
if (isOnDashboard) {
if (isLoggedIn) return true;
return false; // Redirect unauthenticated users to login page
} else if (isLoggedIn) {
return Response.redirect(new URL('/dashboard', nextUrl));
}
return true;
},
},
providers: [], // Add providers with an empty array for now
} satisfies NextAuthConfig;12 Replies
Great golden digger wasp
I haven't worked with next auth. I would recommand you to use clerk for authentication. Clerk is better in all aspects.
Black-throated Blue Warbler
can i see your logout function?
American black bearOP
import { signOut } from '@/auth';
export async function handleSignOut() {
await signOut();
}🫠 probably something stupid but I'm tired...
Black-throated Blue Warbler
have you tried something like
<button onClick={() => signOut({ callbackUrl: '/' })}>
Sign out
</button>American black bearOP
nop 🥲
Black-throated Blue Warbler
import { signOut } from "next-auth/react"
not from wherever your importing it from
not from wherever your importing it from
American black bearOP
<button onClick={() => signOut({ callbackUrl: '/' })} className="flex h-[48px] w-full grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3">
<PowerIcon className="w-6" />
<div className="hidden md:block">Sign Out</div>
</button>
<PowerIcon className="w-6" />
<div className="hidden md:block">Sign Out</div>
</button>
okay I used the "use client"; and the error is gone.. BUT it doesnt work anyway.. gives 404
Black-throated Blue Warbler
do you have your dynamic auth route setup? NextAuth has some pretty confusing documentation.
American black bearOP
okay a few hours later 😂 I think it was a problem with the framework (https://github.com/vercel/next.js/issues/65936)..
fixed it 👍 thank you for the help 🙂
fixed it 👍 thank you for the help 🙂