Merge pull request #116 from FleetAdmiralJakob/google-oauth

feat(auth): added google auth

README.md

@@ -17,8 +17,13 @@ Before you can run the project, you'll need to setup a
 4. Y for configure GitHub OAuth
 5. create a github OAuth app at https://github.com/settings/applications/new
 6. for authorization callback URL enter, https://YOUR_CONVEX_PROJECT_NAME.convex.site/api/auth/callback/github
-7. paste client id when prompted
-8. paste client secret when prompted
+7. Y for configure Google OAuth
+8. create a google OAuth app with following the instructions here https://support.google.com/cloud/answer/6158849?hl=en
+9. for authorised domain enter, YOUR_CONVEX_PROJECT_NAME.convex.site
+10. for authorised JS origin enter, https://YOUR_CONVEX_PROJECT_NAME.convex.site
+11. for redirect URI enter, https://YOUR_CONVEX_PROJECT_NAME.convex.site/api/auth/callback/google
+12. paste client ids when prompted
+13. paste client secrets when prompted
 
 ## Env Setup
 

app/auth/page.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { useAuthActions } from "@convex-dev/auth/react";
+import { GitHubLogoIcon } from "@radix-ui/react-icons";
+import { SiGoogle } from "@icons-pack/react-simple-icons";
+
+const AuthPage = () => {
+  const { signIn } = useAuthActions();
+
+  return (
+    <div className="container mx-auto min-h-screen py-12 pb-24 gap-8">
+      <h1 className="text-center text-3xl font-semibold mb-6">
+        Select How To Sign In
+      </h1>
+
+      <div className="w-full gap-8 flex justify-center">
+        <Button
+          className="gap-1 flex"
+          onClick={() => void signIn("google", { redirectTo: "/" })}
+        >
+          <SiGoogle className="w-4 h-4" /> Google
+        </Button>
+        <Button
+          className="gap-1 flex"
+          onClick={() => void signIn("github", { redirectTo: "/" })}
+        >
+          <GitHubLogoIcon className="w-4 h-4" /> GitHub
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default AuthPage;

app/header.tsx

@@ -3,7 +3,7 @@
 import { useAuthActions } from "@convex-dev/auth/react";
 import { GitHubLogoIcon } from "@radix-ui/react-icons";
 import { ChevronDownIcon } from "@radix-ui/react-icons";
-import { useConvexAuth, useQuery } from "convex/react";
+import { Authenticated, Unauthenticated, useQuery } from "convex/react";
 import dynamic from "next/dynamic";
 import Image from "next/image";
 import Link from "next/link";
@@ -23,22 +23,8 @@ const ThemeToggle = dynamic(
   },
 );
 
-function SignInWithGitHub() {
-  const { signIn } = useAuthActions();
-  return (
-    <Button
-      variant="outline"
-      type="button"
-      onClick={() => void signIn("github", { redirectTo: "/" })}
-    >
-      Sign In
-    </Button>
-  );
-}
-
 export default function Header() {
   const { signOut } = useAuthActions();
-  const { isAuthenticated } = useConvexAuth();
   const flags = useQuery(api.flags.getFlags);
   const isAdminQuery = useQuery(api.users.isAdmin);
 
@@ -94,7 +80,6 @@ export default function Header() {
           Synced using Convex
           <Image src="/convex.svg" alt="Convex" width={24} height={24} />
         </Link>
-
         <div className="">
           <ThemeToggle />
         </div>
@@ -114,11 +99,16 @@ export default function Header() {
             <GitHubLogoIcon className="h-4 w-4" />
           </Link>
         </Button>
-        {!isAuthenticated ? (
-          <SignInWithGitHub />
-        ) : (
+        <Unauthenticated>
+          <Link href="/auth">
+            <Button variant="outline" type="button">
+              Sign In
+            </Button>
+          </Link>
+        </Unauthenticated>
+        <Authenticated>
           <Button onClick={() => void signOut()}>Sign Out</Button>
-        )}
+        </Authenticated>
       </div>
     </header>
   );

convex/auth.ts

@@ -1,7 +1,8 @@
 import GitHub from "@auth/core/providers/github";
 import Resend from "@auth/core/providers/resend";
+import Google from "@auth/core/providers/google";
 import { convexAuth } from "@convex-dev/auth/server";
 
 export const { auth, signIn, signOut, store } = convexAuth({
-  providers: [GitHub, Resend],
+  providers: [GitHub, Resend, Google],
 });

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "npm-run-all dev:init --parallel dev:frontend dev:backend",
     "dev:frontend": "next dev",
-    "dev:backend": "convex dev",
+    "dev:backend": "convex dev --tail-logs",
     "dev:init": "convex dev --run init --until-success",
     "predev": "convex dev --until-success && node setup.mjs --once && convex dashboard",
     "build": "next build",
@@ -18,6 +18,7 @@
     "@auth/core": "^0.34.2",
     "@convex-dev/auth": "^0.0.71",
     "@google/generative-ai": "^0.21.0",
+    "@icons-pack/react-simple-icons": "^10.1.0",
     "@mistralai/mistralai": "^1.1.0",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-icons": "^1.3.0",

setup.mjs

@@ -53,6 +53,28 @@ const variables = JSON.stringify({
         },
       ],
     },
+    {
+      name: "Google OAuth",
+      help:
+        "Create a Google OAuth App, follow the instruction here: " +
+        "https://support.google.com/cloud/answer/6158849?hl=en\n\n" +
+        `When you're asked for an authorised domain use:\n\n` +
+        `  ${deploymentName}.convex.site\n\n` +
+        `When you're asked for an authorised JS origin use:\n\n` +
+        `  https://${deploymentName}.convex.site\n\n` +
+        `When you're asked for a callback URL use:\n\n` +
+        `  https://${deploymentName}.convex.site/api/auth/callback/google`,
+      variables: [
+        {
+          name: "AUTH_GOOGLE_ID",
+          description: "the Client ID of your Google OAuth App",
+        },
+        {
+          name: "AUTH_GOOGLE_SECRET",
+          description: "the generated client secret",
+        },
+      ],
+    },
     {
       name: "Resend",
       help: "Sign up for Resend at https://resend.com/signup. Then create an API Key.",