add custom sign in page

2023-04-10 23:33:04 +02:00 · 2023-04-10 23:33:04 +02:00 · 9260300521
commit 9260300521
parent e270079c86
4 changed files with 162 additions and 55 deletions
--- a/src/pages/sign-in.tsx
+++ b/src/pages/sign-in.tsx
@ -0,0 +1,104 @@
+import { GetServerSideProps, type NextPage } from "next";
+import Head from "next/head";
+
+import { api } from "~/utils/api";
+import { type AppProps } from "next/app";
+import { getProviders, signIn } from "next-auth/react";
+import { getServerSession } from "next-auth";
+import { authOptions } from "~/server/auth";
+
+interface Props {
+  providers: AppProps;
+}
+
+const SignIn: NextPage = ({ providers }: Props) => {
+  const hello = api.example.hello.useQuery({ text: "from tRPC" });
+
+  console.log(providers);
+
+  return (
+    <>
+      <Head>
+        <title>Create T3 App</title>
+        <meta name="description" content="Generated by create-t3-app" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c]">
+        <div className="border-y border-gray-700 bg-gray-800 px-4 py-8 shadow sm:rounded-lg sm:border-x sm:px-10">
+          <div className="animate-fade-in flex flex-col justify-center text-center">
+            <span className="text-sm font-medium text-gray-300">
+              Sign in with
+            </span>
+            <div className="mt-6 grid grid-cols-2 gap-3">
+              <button
+                onClick={() =>
+                  signIn("google", {
+                    callbackUrl: providers.google.callbackUrl,
+                  })
+                }
+                className="hover:bg-gray-750 relative inline-flex items-center justify-center rounded-md border border-gray-700 bg-gray-800 px-6 py-3 text-lg font-medium text-white shadow-sm hover:text-gray-100"
+                type="button"
+              >
+                <span className="flex flex-row">
+                  <svg
+                    aria-hidden="true"
+                    focusable="false"
+                    data-prefix="fab"
+                    data-icon="google"
+                    className="svg-inline--fa fa-google mr-2"
+                    role="img"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 488 512"
+                  >
+                    <path
+                      fill="currentColor"
+                      d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
+                    ></path>
+                  </svg>
+                  <span>Google</span>
+                </span>
+              </button>
+
+              <button
+                className="hover:bg-gray-750 relative inline-flex items-center justify-center rounded-md border border-gray-700 bg-gray-800 px-6 py-3 text-lg font-medium text-white shadow-sm hover:text-gray-100"
+                type="button"
+                onClick={() =>
+                  signIn("github", {
+                    callbackUrl: providers.github.callbackUrl,
+                  })
+                }
+              >
+                <span className="flex flex-row">
+                  <span>Github</span>
+                </span>
+              </button>
+            </div>
+            <p className="prose prose-sm mx-auto mt-6 max-w-[18rem] text-xs text-gray-500">
+              By signing in, you agree to our{" "}
+              <a href="/info/terms-of-service">Terms of Service</a> and{" "}
+              <a href="/info/privacy-policy">Privacy Policy</a>.
+            </p>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+};
+
+export default SignIn;
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  const session = await getServerSession(context.req, context.res, authOptions);
+
+  // If the user is already logged in, redirect.
+  // Note: Make sure not to redirect to the same page
+  // To avoid an infinite loop!
+  if (session) {
+    return { redirect: { destination: "/" } };
+  }
+
+  const providers = await getProviders();
+  return {
+    props: { providers },
+  };
+};
--- a/src/server/auth.ts
+++ b/src/server/auth.ts
@ -50,12 +50,12 @@ export const authOptions: NextAuthOptions = {
  providers: [
    GoogleProvider({
      clientId: env.GOOGLE_CLIENT_ID,
-      clientSecret: env.GOOGLE_CLIENT_SECRET
+      clientSecret: env.GOOGLE_CLIENT_SECRET,
    }),
    GitHubProvider({
      clientId: env.GITHUB_ID,
-      clientSecret: env.GITHUB_SECRET
-    })
+      clientSecret: env.GITHUB_SECRET,
+    }),
    /**
     * ...add more providers here.
     *
@ -66,6 +66,9 @@ export const authOptions: NextAuthOptions = {
     * @see https://next-auth.js.org/providers/github
     */
  ],
+  pages: {
+    signIn: "/sign-in",
+  },
 };

 /**