fix: add google provider for auth

apps/nextjs/src/app/_components/auth-showcase.tsx

@@ -12,10 +12,7 @@ export async function AuthShowcase({ provider }: Props) {
 
   if (!session) {
     return (
-      <SignIn
-        provider={provider}
-        className="rounded-full bg-white/10 px-10 py-3 font-semibold no-underline transition hover:bg-white/20"
-      >
+      <SignIn provider={provider}>
         Sign in with {provider.charAt(0).toUpperCase() + provider.slice(1)}
       </SignIn>
     );
@@ -27,9 +24,7 @@ export async function AuthShowcase({ provider }: Props) {
         {session && <span>Logged in as {session.user.name}</span>}
       </p>
 
-      <SignOut className="rounded-full bg-white/10 px-10 py-3 font-semibold no-underline transition hover:bg-white/20">
-        Sign out
-      </SignOut>
+      <SignOut>Sign out</SignOut>
     </div>
   );
 }

apps/nextjs/src/app/_components/button.tsx

@@ -37,6 +37,8 @@ const Button = forwardRef<Ref, Props>(
         {
           "border border-white bg-transparent px-4 py-2 text-white no-underline hover:border-transparent hover:bg-white  hover:text-purple-500":
             variant === "primary",
+          "rounded-full bg-white/10 px-10 py-3 font-semibold no-underline transition hover:bg-white/20":
+            variant === "secondary",
           "p-0 text-white  hover:underline": variant === "link",
         },
         className,

apps/nextjs/src/app/_components/form/Input.tsx

@@ -13,7 +13,7 @@ type Props = InputHTMLAttributes<HTMLInputElement>;
 /* <Input />
 ============================================================================= */
 const Input = forwardRef<Ref, Props>(
-  ({ onClick, className, type, ...props }, ref) => (
+  ({ onClick, className, type = "text", ...props }, ref) => (
     <input
       className={classNames(
         "mb-0 block w-full appearance-none rounded border border-white bg-transparent bg-clip-padding px-3 py-2 text-sm text-white backdrop-blur transition placeholder:text-gray-400 disabled:cursor-not-allowed disabled:text-white disabled:opacity-50",

apps/nextjs/src/app/_components/form/Label.tsx

@@ -17,7 +17,10 @@ const Label = forwardRef<Ref, Props>(
     <label
       ref={ref}
       htmlFor={htmlFor}
-      className={classNames("mb-1 text-sm font-semibold uppercase", className)}
+      className={classNames(
+        "mb-1 text-left text-sm font-semibold uppercase",
+        className,
+      )}
       {...props}
     />
   ),

apps/nextjs/src/components/auth.tsx

@@ -1,24 +1,31 @@
-import type { ComponentProps } from "react";
-
 import type { OAuthProviders } from "@acme/auth";
 import { CSRF_experimental } from "@acme/auth";
 
+import Button from "~/app/_components/button";
+
 export function SignIn({
   provider,
   ...props
-}: { provider: OAuthProviders } & ComponentProps<"button">) {
+}: {
+  provider: OAuthProviders;
+  children: React.ReactNode;
+}) {
   return (
     <form action={`/api/auth/signin/${provider}`} method="post">
-      <button {...props} />
+      <Button variant="secondary" type="submit" className="w-full">
+        {props.children}
+      </Button>
       <CSRF_experimental />
     </form>
   );
 }
 
-export function SignOut(props: ComponentProps<"button">) {
+export function SignOut(props: { children: React.ReactNode }) {
   return (
-    <form action="/api/auth/signout" method="post">
-      <button {...props} />
+    <form action="/api/auth/signout" method="post" className="w-full">
+      <Button variant="secondary" type="submit">
+        {props.children}
+      </Button>
       <CSRF_experimental />
     </form>
   );

packages/auth/index.ts

@@ -1,5 +1,5 @@
 import Github from "@auth/core/providers/github";
-// import Google from "@auth/core/providers/google";
+import Google from "@auth/core/providers/google";
 import type { DefaultSession } from "@auth/core/types";
 import { PrismaAdapter } from "@auth/prisma-adapter";
 import NextAuth from "next-auth";
@@ -28,14 +28,19 @@ export const {
   CSRF_experimental,
 } = NextAuth({
   adapter: PrismaAdapter(prisma),
+  secret: env.NEXTAUTH_SECRET,
   providers: [
-    // Google({
-    //   clientId: env.GOOGLE_CLIENT_ID,
-    //   clientSecret: env.GOOGLE_CLIENT_SECRET,
-    // }),
+    Google({
+      clientId: env.GOOGLE_CLIENT_ID,
+      clientSecret: env.GOOGLE_CLIENT_SECRET,
+      // NextJS is able to automatically link accounts. See the discussion thread:
+      // https://github.com/nextauthjs/next-auth/discussions/2808#discussioncomment-6021287
+      allowDangerousEmailAccountLinking: true,
+    }),
     Github({
       clientId: env.GITHUB_CLIENT_ID,
       clientSecret: env.GITHUB_CLIENT_SECRET,
+      allowDangerousEmailAccountLinking: true,
     }),
   ],
   callbacks: {