Is there a way to automatically refresh the URL path once a successful login is completed with credentials?
I attempted to set up credential authentication similar to the guide provided by Next in their tutorial here. However, I am only using email for authentication.
I can successfully log in, but the URL in the address bar does not update. It should change from /login to /dashboard. The update only occurs after manually refreshing the page. Without the update, I am unable to sign out after clicking "sign out." I can only sign out if I manually refresh the page and the address changes. This can be seen in the gif below.
Here is my folder structure.
https://i.sstatic.net/Av1UqR8J.gif
// ./auth.config.ts
import type { NextAuthConfig } from 'next-auth';
export const authConfig = {
pages: {
signIn: '/login',
},
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: [],
} satisfies NextAuthConfig;
// ./middleware.ts
import NextAuth from 'next-auth';
import { authConfig } from './auth.config';
export default NextAuth(authConfig).auth;
export const config = {
matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'],
};
// ./auth.ts
import NextAuth from 'next-auth';
import Credentials from 'next-auth/providers/credentials';
import { z } from 'zod';
import { sql } from '@vercel/postgres';
import { authConfig } from './auth.config';
import type { User } from '~/lib/definitions';
async function getUser(email: string): Promise<User | undefined> {
try {
const user = await sql<User>`SELECT * FROM users WHERE email=${email}`;
return user.rows[0];
} catch (error) {
console.error('Failed to fetch user:', error);
throw new Error('Failed to fetch user.');
}
}
export const { auth, signIn, signOut } = NextAuth({
...authConfig,
providers: [
Credentials({
async authorize(credentials) {
const parsedCredentials = z
.object({ email: z.string().email() })
.safeParse(credentials);
if (parsedCredentials.success) {
const { email } = parsedCredentials.data;
const user = await getUser(email);
if (user) return user;
return null;
}
return null;
},
}),
],
});
// ./app/lib/actions.ts
'use server';
import { AuthError } from 'next-auth';
import { signIn } from '~/../auth';
export async function authenticate(
prevState: string | undefined,
formData: FormData
) {
try {
await signIn('credentials', formData);
} catch (error) {
if (error instanceof AuthError) {
switch (error.type) {
case 'CredentialsSignin':
return 'Invalid credentials.';
default:
return 'Something went wrong.';
}
}
throw error;
}
}
// ./app/login/page.tsx
'use client';
import { useFormState, useFormStatus } from 'react-dom';
import { authenticate } from '~/lib/actions';
export default function LoginPage() {
const [errorMessage, dispatch] = useFormState(authenticate, undefined);
return (
<main>
<form action={dispatch}>
<div>
<label htmlFor="email">
Email
</label>
<div>
<input
id="email"
type="email"
name="email"
placeholder="Enter your email address"
required
/>
</div>
</div>
<LoginButton />
</form>
</main>
);
}
function LoginButton() {
const { pending } = useFormStatus();
return (
<button aria-disabled={pending}>
Sign in
</button>
);
}
// ./app/dashboard/page.tsx
import { signOut } from '~/../auth';
export default function Page() {
return (
<main>
<h1>Dashboard</h1>
<p>Dashboard content goes here</p>
<form
action={async () => {
'use server';
await signOut({ redirectTo: '/login' });
}}
>
<button>
<div>Sign Out</div>
</button>
</form>
</main>
);
}