From d5b08673a07c6fa52645eebbcdc08a5971e8aecb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakob=20R=C3=B6ssner?= Date: Thu, 24 Oct 2024 01:50:59 +1100 Subject: [PATCH 1/2] feat(auth): added google auth --- README.md | 9 ++++++-- app/auth/page.tsx | 36 ++++++++++++++++++++++++++++++++ app/header.tsx | 30 +++++++++----------------- convex/_generated/api.d.ts | 4 ---- convex/_generated/api.js | 4 ---- convex/_generated/dataModel.d.ts | 4 ---- convex/_generated/server.d.ts | 4 ---- convex/_generated/server.js | 4 ---- convex/auth.ts | 3 ++- package.json | 3 ++- setup.mjs | 22 +++++++++++++++++++ 11 files changed, 79 insertions(+), 44 deletions(-) create mode 100644 app/auth/page.tsx diff --git a/README.md b/README.md index e82a153..cf8f73e 100644 --- a/README.md +++ b/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 diff --git a/app/auth/page.tsx b/app/auth/page.tsx new file mode 100644 index 0000000..a541068 --- /dev/null +++ b/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 ( +
+

+ Select How To Sign In +

+ +
+ + +
+
+ ); +}; + +export default AuthPage; diff --git a/app/header.tsx b/app/header.tsx index d80fc76..03a6f87 100644 --- a/app/header.tsx +++ b/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 ( - - ); -} - 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 Convex -
@@ -114,11 +99,16 @@ export default function Header() { - {!isAuthenticated ? ( - - ) : ( + + + + + + - )} + ); diff --git a/convex/_generated/api.d.ts b/convex/_generated/api.d.ts index 7ed685a..3f64db7 100644 --- a/convex/_generated/api.d.ts +++ b/convex/_generated/api.d.ts @@ -1,5 +1,3 @@ -/* prettier-ignore-start */ - /* eslint-disable */ /** * Generated `api` utility. @@ -66,5 +64,3 @@ export declare const internal: FilterApi< typeof fullApi, FunctionReference >; - -/* prettier-ignore-end */ diff --git a/convex/_generated/api.js b/convex/_generated/api.js index b5f2e08..3f9c482 100644 --- a/convex/_generated/api.js +++ b/convex/_generated/api.js @@ -1,5 +1,3 @@ -/* prettier-ignore-start */ - /* eslint-disable */ /** * Generated `api` utility. @@ -22,5 +20,3 @@ import { anyApi } from "convex/server"; */ export const api = anyApi; export const internal = anyApi; - -/* prettier-ignore-end */ diff --git a/convex/_generated/dataModel.d.ts b/convex/_generated/dataModel.d.ts index 91445df..8541f31 100644 --- a/convex/_generated/dataModel.d.ts +++ b/convex/_generated/dataModel.d.ts @@ -1,5 +1,3 @@ -/* prettier-ignore-start */ - /* eslint-disable */ /** * Generated data model types. @@ -60,5 +58,3 @@ export type Id = * `mutationGeneric` to make them type-safe. */ export type DataModel = DataModelFromSchemaDefinition; - -/* prettier-ignore-end */ diff --git a/convex/_generated/server.d.ts b/convex/_generated/server.d.ts index 8190e1f..7f337a4 100644 --- a/convex/_generated/server.d.ts +++ b/convex/_generated/server.d.ts @@ -1,5 +1,3 @@ -/* prettier-ignore-start */ - /* eslint-disable */ /** * Generated utilities for implementing server-side Convex query and mutation functions. @@ -142,5 +140,3 @@ export type DatabaseReader = GenericDatabaseReader; * for the guarantees Convex provides your functions. */ export type DatabaseWriter = GenericDatabaseWriter; - -/* prettier-ignore-end */ diff --git a/convex/_generated/server.js b/convex/_generated/server.js index 33b487c..566d485 100644 --- a/convex/_generated/server.js +++ b/convex/_generated/server.js @@ -1,5 +1,3 @@ -/* prettier-ignore-start */ - /* eslint-disable */ /** * Generated utilities for implementing server-side Convex query and mutation functions. @@ -89,5 +87,3 @@ export const internalAction = internalActionGeneric; * @returns The wrapped endpoint function. Route a URL path to this function in `convex/http.js`. */ export const httpAction = httpActionGeneric; - -/* prettier-ignore-end */ diff --git a/convex/auth.ts b/convex/auth.ts index fee913b..bb20a2b 100644 --- a/convex/auth.ts +++ b/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], }); diff --git a/package.json b/package.json index 372fa77..50b2a2a 100644 --- a/package.json +++ b/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", diff --git a/setup.mjs b/setup.mjs index c477c73..801bfbb 100644 --- a/setup.mjs +++ b/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.", From 42d73b54e95640e8d8cf4f105e715b51ef891942 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakob=20R=C3=B6ssner?= Date: Thu, 24 Oct 2024 01:56:56 +1100 Subject: [PATCH 2/2] revert #d5b08673 --- convex/_generated/api.d.ts | 4 ++++ convex/_generated/api.js | 4 ++++ convex/_generated/dataModel.d.ts | 4 ++++ convex/_generated/server.d.ts | 4 ++++ convex/_generated/server.js | 4 ++++ 5 files changed, 20 insertions(+) diff --git a/convex/_generated/api.d.ts b/convex/_generated/api.d.ts index 3f64db7..7ed685a 100644 --- a/convex/_generated/api.d.ts +++ b/convex/_generated/api.d.ts @@ -1,3 +1,5 @@ +/* prettier-ignore-start */ + /* eslint-disable */ /** * Generated `api` utility. @@ -64,3 +66,5 @@ export declare const internal: FilterApi< typeof fullApi, FunctionReference >; + +/* prettier-ignore-end */ diff --git a/convex/_generated/api.js b/convex/_generated/api.js index 3f9c482..b5f2e08 100644 --- a/convex/_generated/api.js +++ b/convex/_generated/api.js @@ -1,3 +1,5 @@ +/* prettier-ignore-start */ + /* eslint-disable */ /** * Generated `api` utility. @@ -20,3 +22,5 @@ import { anyApi } from "convex/server"; */ export const api = anyApi; export const internal = anyApi; + +/* prettier-ignore-end */ diff --git a/convex/_generated/dataModel.d.ts b/convex/_generated/dataModel.d.ts index 8541f31..91445df 100644 --- a/convex/_generated/dataModel.d.ts +++ b/convex/_generated/dataModel.d.ts @@ -1,3 +1,5 @@ +/* prettier-ignore-start */ + /* eslint-disable */ /** * Generated data model types. @@ -58,3 +60,5 @@ export type Id = * `mutationGeneric` to make them type-safe. */ export type DataModel = DataModelFromSchemaDefinition; + +/* prettier-ignore-end */ diff --git a/convex/_generated/server.d.ts b/convex/_generated/server.d.ts index 7f337a4..8190e1f 100644 --- a/convex/_generated/server.d.ts +++ b/convex/_generated/server.d.ts @@ -1,3 +1,5 @@ +/* prettier-ignore-start */ + /* eslint-disable */ /** * Generated utilities for implementing server-side Convex query and mutation functions. @@ -140,3 +142,5 @@ export type DatabaseReader = GenericDatabaseReader; * for the guarantees Convex provides your functions. */ export type DatabaseWriter = GenericDatabaseWriter; + +/* prettier-ignore-end */ diff --git a/convex/_generated/server.js b/convex/_generated/server.js index 566d485..33b487c 100644 --- a/convex/_generated/server.js +++ b/convex/_generated/server.js @@ -1,3 +1,5 @@ +/* prettier-ignore-start */ + /* eslint-disable */ /** * Generated utilities for implementing server-side Convex query and mutation functions. @@ -87,3 +89,5 @@ export const internalAction = internalActionGeneric; * @returns The wrapped endpoint function. Route a URL path to this function in `convex/http.js`. */ export const httpAction = httpActionGeneric; + +/* prettier-ignore-end */