💡
It is a good practice to keep as much as we can on the server side of our authentication flow, simply because of security purposes. This is why we outsource the LoginButton to a new file, although the component is small and doesn't do a lot.
With this button placed in the Login page, we are almost there. Please style all the pages and components, it breaks my heart to not style all these things here.
Next up is to create our middleware to handle the redirection of users depending on there sessions existence. With a middleware we can protect our app from unauthenticated users. Create a `middleware.ts` file in the root of your project:
```plaintext
middleware.ts
import { withAuth } from 'next-auth/middleware'
import { NextResponse } from 'next/server'
export default withAuth(
function middleware(req) {
const isAuth = !!req.nextauth.token
const isAuthPage = req.nextUrl.pathname.startsWith('/login')
if (isAuthPage) {
if (isAuth) {
return NextResponse.redirect(new URL('/', req.url))
}
return null
}
if (!isAuth) {
return NextResponse.redirect(new URL('/login', req.url))
}
},
{
callbacks: {
authorized: () => true
},
}
)
export const config = {
matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
}
```
This middleware uses the provided `next-auth` `withAuth` middleware. If the user in on the `/login` page and authenticated, we will redirect to `/`. If the user is not authenticated, we will redirect to the `/login` page. By doing this, unauthenticated users won't be able to access the app.
One thing that was a bit odd when I first used a middleware, was the matcher. The middleware will run on every single route by default, but we can exclude routes using the matcher attribute in the config object. We will be just fine with this matcher for now (and for most Next.js projects), you can read more about the `withAuth` middleware here: [https://next-auth.js.org/configuration/nextjs#middleware](https://next-auth.js.org/configuration/nextjs#middleware).
The last thing we need to do, is to create a sign out button. Good news is that, this will be the easiest part of the whole setup. All we need is to create a simple `handleSignOut` function and call it on any buttons `onClick` event. Something like this:
```plaintext
'use client';
const YourComponent = () => {
const handleSignOut = async () => {
await signOut({ redirect: false });
router.push('/login');
};
return (
...