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.
Masked Duck
can i see your logout function?
@Masked Duck 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...
Masked Duck
have you tried something like
<button onClick={() => signOut({ callbackUrl: '/' })}>
Sign out
</button>Masked Duck
import { signOut } from "next-auth/react"
not from wherever your importing it from
not from wherever your importing it from
@Masked Duck import { signOut } from "next-auth/react"
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
Masked Duck
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 🙂