Add custom login page

dv297 · Sep 28, 2022 · bbfaa7a · bbfaa7a · vercel · Sep 28, 2022
1 parent cb5b2ee
commit bbfaa7a
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 1 deletion.
diff --git a/src/components/WorkspaceSelector.tsx b/src/components/WorkspaceSelector.tsx
@@ -21,7 +21,7 @@ const WorkspaceMenuItem = (props: WorkspaceMenuItemProps) => {
           <button
             onClick={props.onClick}
             className={`${
-              active ? 'bg-violet-500 text-white' : 'text-gray-900'
+              active ? 'bg-primary text-white' : 'text-gray-900'
             } group flex w-full items-center rounded-md px-2 py-2 text-sm`}
           >
             {props.children}

diff --git a/src/pages/api/auth/[...nextauth].ts b/src/pages/api/auth/[...nextauth].ts
@@ -71,4 +71,7 @@ export const authOptions: NextAuthOptions = {
       };
     },
   },
+  pages: {
+    signIn: '/auth/signin',
+  },
 };
diff --git a/src/pages/auth/signin.tsx b/src/pages/auth/signin.tsx
@@ -0,0 +1,55 @@
+import { getProviders, signIn } from 'next-auth/react';
+import { ClientSafeProvider } from 'next-auth/react/types';
+import { ReactNode } from 'react';
+
+import LandingPageLayout from '../../components/LandingPageLayout';
+
+interface SigninProps {
+  providers: ClientSafeProvider[];
+}
+
+const Signin = (props: SigninProps) => {
+  const { providers } = props;
+
+  return (
+    <div className="w-screen min-h-screen flex flex-col justify-center items-center">
+      <div className="flex flex-col justify-center items-center">
+        <div className="h-80 w-80 bg-white shadow-lg px-12 py-12 rounded-2xl">
+          <div className="w-full text-center pb-3">
+            <span className="text-xl font-bold text-primary text-center">
+              Sign In
+            </span>
+          </div>
+          {providers &&
+            Object.values(providers).map((provider) => (
+              <div className="mt-4" key={provider.id}>
+                <button
+                  onClick={() =>
+                    signIn(provider.id, {
+                      callbackUrl: '/app/dashboard',
+                    })
+                  }
+                  className="w-full inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                >
+                  Sign in with {provider.name}
+                </button>
+              </div>
+            ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+Signin.getLayout = (page: ReactNode) => {
+  return <LandingPageLayout>{page}</LandingPageLayout>;
+};
+
+export async function getServerSideProps() {
+  const providers = await getProviders();
+  return {
+    props: { providers },
+  };
+}
+
+export default Signin;
-Original file line number
+Diff line change
@@ Expand Up / @@ -71,4 +71,7 @@ export const authOptions: NextAuthOptions = { @@
           };
         },
       },
+      pages: {
+        signIn: '/auth/signin',
+      },
     };