feat: add custom sign in page.

middleware.ts

@@ -1,21 +1,29 @@
 import { withAuth } from 'next-auth/middleware';
 import { NextResponse } from 'next/server';
 
-import { MAINTENANCE_MODE } from './utils/app/const';
+import { MAINTENANCE_MODE } from '@/utils/app/const';
 
-export default withAuth(function middleware(req) {
-  if (MAINTENANCE_MODE) {
-    req.nextUrl.pathname = `/maintenance`;
-    return NextResponse.rewrite(req.nextUrl);
-  }
-  const username = req.nextauth.token?.email;
-  if (username) {
-    const requestHeaders = new Headers(req.headers);
-    requestHeaders.set('x-user', username);
-    return NextResponse.next({
-      request: {
-        headers: requestHeaders,
-      },
-    });
-  }
-});
+
+export default withAuth(
+  function middleware(req) {
+    if (MAINTENANCE_MODE) {
+      req.nextUrl.pathname = `/maintenance`;
+      return NextResponse.rewrite(req.nextUrl);
+    }
+    const username = req.nextauth.token?.email;
+    if (username) {
+      const requestHeaders = new Headers(req.headers);
+      requestHeaders.set('x-user', username);
+      return NextResponse.next({
+        request: {
+          headers: requestHeaders,
+        },
+      });
+    }
+  },
+  {
+    pages: {
+      signIn: '/auth/signin',
+    },
+  },
+);

pages/api/auth/[...nextauth].ts

@@ -22,7 +22,10 @@ export const authOptions: NextAuthOptions = {
   session: {
     strategy: 'jwt',
   },
+  pages: {
+    signIn: '/auth/signin',
+  },
   // debug: true,
 };
 
-export default NextAuth(authOptions);
+export default NextAuth(authOptions);

pages/auth/signin.tsx

@@ -0,0 +1,41 @@
+import { getProviders, signIn } from 'next-auth/react';
+
+import { GetServerSidePropsContext, InferGetServerSidePropsType } from 'next';
+import { getServerSession } from 'next-auth';
+
+import { authOptions } from '@/pages/api/auth/[...nextauth]';
+
+
+export default function SignIn({
+  providers,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) {
+  return (
+    <>
+      {providers &&
+        Object.values(providers).map((provider) => (
+          <div key={provider.name}>
+            <button onClick={() => signIn(provider.id)}>
+              Sign in with {provider.name}
+            </button>
+          </div>
+        ))}
+    </>
+  );
+}
+
+export async function getServerSideProps({
+  req,
+  res,
+}: GetServerSidePropsContext) {
+  const session = await getServerSession(req, res, authOptions);
+
+  // If the user is already logged in, redirect.
+  if (session) {
+    return { redirect: { destination: '/' } };
+  }
+
+  const providers = await getProviders();
+  return {
+    props: { providers: providers ?? [] },
+  };
+}