Add oAuth logins (#532)

* feat: oauth

* fix: auth flows

* fix: pull request feedbacks

* fix: add production verification for REPLACE ME values in env vars

* fix: remove unused variable

* Update src/server/routers/oauth.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* fix: PR feedbacks

* fix: move oauth config file

* fix: toasts

* docs: add comment for artic documentation link

* fix: remove unused some

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Author: ivan-dalmet

.env.example

@@ -16,6 +16,18 @@ NEXT_PUBLIC_IS_DEMO="false"
 # DATABASE
 DATABASE_URL="postgres://${DOCKER_DATABASE_USERNAME}:${DOCKER_DATABASE_PASSWORD}@localhost:${DOCKER_DATABASE_PORT}/${DOCKER_DATABASE_NAME}"
 
+# GITHUB
+GITHUB_CLIENT_ID="REPLACE ME"
+GITHUB_CLIENT_SECRET="REPLACE ME"
+
+# GOOGLE
+GOOGLE_CLIENT_ID="REPLACE ME"
+GOOGLE_CLIENT_SECRET="REPLACE ME"
+
+# DISCORD
+DISCORD_CLIENT_ID="REPLACE ME"
+DISCORD_CLIENT_SECRET="REPLACE ME"
+
 # EMAILS
 EMAIL_SERVER="smtp://username:[email protected]:1025"
 EMAIL_FROM="Start UI <[email protected]>"

package.json

@@ -64,6 +64,7 @@
     "@trpc/client": "10.45.2",
     "@trpc/react-query": "10.45.2",
     "@trpc/server": "10.45.2",
+    "arctic": "1.9.2",
     "bcrypt": "5.1.1",
     "chakra-react-select": "4.9.1",
     "colorette": "2.0.20",

pnpm-lock.yaml

@@ -1,3 +1,12 @@
+model OAuthAccount {
+  provider       String
+  providerUserId String
+  userId         String
+  user           User   @relation(references: [id], fields: [userId], onDelete: Cascade)
+
+  @@id([provider, providerUserId])
+}
+
 model Session {
   id        String   @id
   userId    String

prisma/schema/auth.prisma

@@ -13,16 +13,17 @@ enum UserRole {
 }
 
 model User {
-  id              String        @id @default(cuid())
-  createdAt       DateTime      @default(now())
-  updatedAt       DateTime      @updatedAt
+  id              String         @id @default(cuid())
+  createdAt       DateTime       @default(now())
+  updatedAt       DateTime       @updatedAt
   name            String?
-  email           String?       @unique
-  isEmailVerified Boolean       @default(false)
-  accountStatus   AccountStatus @default(NOT_VERIFIED)
+  email           String?        @unique
+  isEmailVerified Boolean        @default(false)
+  accountStatus   AccountStatus  @default(NOT_VERIFIED)
   image           String?
-  authorizations  UserRole[]    @default([APP])
-  language        String        @default("en")
+  authorizations  UserRole[]     @default([APP])
+  language        String         @default("en")
   lastLoginAt     DateTime?
   session         Session[]
+  oauth           OAuthAccount[]
 }

prisma/schema/user.prisma

@@ -0,0 +1,13 @@
+'use client';
+
+import { Suspense } from 'react';
+
+import PageOAuthCallback from '@/features/auth/PageOAuthCallback';
+
+export default function Page() {
+  return (
+    <Suspense>
+      <PageOAuthCallback />
+    </Suspense>
+  );
+}

src/app/oauth/[provider]/page.tsx

@@ -3,9 +3,6 @@
 import { createEnv } from '@t3-oss/env-nextjs';
 import { z } from 'zod';
 
-const zNodeEnv = () =>
-  z.enum(['development', 'test', 'production']).default('development');
-
 export const env = createEnv({
   /**
    * Specify your server-side environment variables schema here. This way you can ensure the app
@@ -15,6 +12,15 @@ export const env = createEnv({
     DATABASE_URL: z.string().url(),
     NODE_ENV: zNodeEnv(),
 
+    GITHUB_CLIENT_ID: zOptionalWithReplaceMe(),
+    GITHUB_CLIENT_SECRET: zOptionalWithReplaceMe(),
+
+    GOOGLE_CLIENT_ID: zOptionalWithReplaceMe(),
+    GOOGLE_CLIENT_SECRET: zOptionalWithReplaceMe(),
+
+    DISCORD_CLIENT_ID: zOptionalWithReplaceMe(),
+    DISCORD_CLIENT_SECRET: zOptionalWithReplaceMe(),
+
     EMAIL_SERVER: z.string().url(),
     EMAIL_FROM: z.string(),
     LOGGER_LEVEL: z
@@ -77,6 +83,15 @@ export const env = createEnv({
     LOGGER_LEVEL: process.env.LOGGER_LEVEL,
     LOGGER_PRETTY: process.env.LOGGER_PRETTY,
 
+    GITHUB_CLIENT_ID: process.env.GITHUB_CLIENT_ID,
+    GITHUB_CLIENT_SECRET: process.env.GITHUB_CLIENT_SECRET,
+
+    GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID,
+    GOOGLE_CLIENT_SECRET: process.env.GOOGLE_CLIENT_SECRET,
+
+    DISCORD_CLIENT_ID: process.env.DISCORD_CLIENT_ID,
+    DISCORD_CLIENT_SECRET: process.env.DISCORD_CLIENT_SECRET,
+
     NEXT_PUBLIC_BASE_URL: process.env.NEXT_PUBLIC_VERCEL_URL
       ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
       : process.env.NEXT_PUBLIC_BASE_URL,
@@ -92,3 +107,22 @@ export const env = createEnv({
    */
   skipValidation: !!process.env.SKIP_ENV_VALIDATION,
 });
+
+function zNodeEnv() {
+  return z.enum(['development', 'test', 'production']).default('development');
+}
+
+function zOptionalWithReplaceMe() {
+  return z
+    .string()
+    .optional()
+    .refine(
+      (value) =>
+        // Check in prodution if the value is not REPLACE ME
+        process.env.NODE_ENV !== 'production' || value !== 'REPLACE ME',
+      {
+        message: 'Update the value "REPLACE ME" or remove the variable',
+      }
+    )
+    .transform((value) => (value === 'REPLACE ME' ? undefined : value));
+}

src/env.mjs

@@ -0,0 +1,90 @@
+import {
+  Button,
+  ButtonProps,
+  Divider,
+  Flex,
+  SimpleGrid,
+  Text,
+} from '@chakra-ui/react';
+import { useRouter } from 'next/navigation';
+import { useTranslation } from 'react-i18next';
+
+import { Icon } from '@/components/Icons';
+import { toastCustom } from '@/components/Toast';
+import {
+  OAUTH_PROVIDERS,
+  OAUTH_PROVIDERS_ENABLED_ARRAY,
+  OAuthProvider,
+} from '@/features/auth/oauth-config';
+import { trpc } from '@/lib/trpc/client';
+
+export const OAuthLoginButton = ({
+  provider,
+  ...rest
+}: {
+  provider: OAuthProvider;
+} & ButtonProps) => {
+  const { t } = useTranslation(['auth']);
+  const router = useRouter();
+  const loginWith = trpc.oauth.createAuthorizationUrl.useMutation({
+    onSuccess: (data) => {
+      router.push(data.url);
+    },
+    onError: (error) => {
+      toastCustom({
+        status: 'error',
+        title: t('auth:login.feedbacks.oAuthError.title', {
+          provider: OAUTH_PROVIDERS[provider].label,
+        }),
+        description: error.message,
+      });
+    },
+  });
+
+  return (
+    <Button
+      onClick={() => loginWith.mutate({ provider: provider })}
+      isLoading={loginWith.isLoading || loginWith.isSuccess}
+      leftIcon={<Icon icon={OAUTH_PROVIDERS[provider].icon} />}
+      {...rest}
+    >
+      {OAUTH_PROVIDERS[provider].label}
+    </Button>
+  );
+};
+
+export const OAuthLoginButtonsGrid = () => {
+  if (!OAUTH_PROVIDERS_ENABLED_ARRAY.length) return null;
+  return (
+    <SimpleGrid columns={2} gap={3}>
+      {OAUTH_PROVIDERS_ENABLED_ARRAY.map(({ provider }) => {
+        return (
+          <OAuthLoginButton
+            key={provider}
+            provider={provider}
+            _first={{
+              gridColumn:
+                OAUTH_PROVIDERS_ENABLED_ARRAY.length % 2 !== 0
+                  ? 'span 2'
+                  : undefined,
+            }}
+          />
+        );
+      })}
+    </SimpleGrid>
+  );
+};
+
+export const OAuthLoginDivider = () => {
+  const { t } = useTranslation(['common']);
+  if (!OAUTH_PROVIDERS_ENABLED_ARRAY.length) return null;
+  return (
+    <Flex alignItems="center" gap={2}>
+      <Divider flex={1} />
+      <Text fontSize="xs" color="text-dimmed" textTransform="uppercase">
+        {t('common:or')}
+      </Text>
+      <Divider flex={1} />
+    </Flex>
+  );
+};

src/features/auth/OAuthLogin.tsx

@@ -6,6 +6,10 @@ import { useRouter } from 'next/navigation';
 import { useTranslation } from 'react-i18next';
 
 import { LoginForm } from '@/features/auth/LoginForm';
+import {
+  OAuthLoginButtonsGrid,
+  OAuthLoginDivider,
+} from '@/features/auth/OAuthLogin';
 import { ROUTES_AUTH } from '@/features/auth/routes';
 import type { RouterInputs, RouterOutputs } from '@/lib/trpc/types';
 
@@ -51,6 +55,10 @@ export default function PageLogin() {
           </Box>
         </Button>
       </Stack>
+
+      <OAuthLoginButtonsGrid />
+      <OAuthLoginDivider />
+
       <LoginForm onSuccess={handleOnSuccess} />
     </Stack>
   );

src/features/auth/PageLogin.tsx

@@ -0,0 +1,70 @@
+import React, { useEffect, useRef } from 'react';
+
+import {
+  notFound,
+  useParams,
+  useRouter,
+  useSearchParams,
+} from 'next/navigation';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+
+import { LoaderFull } from '@/components/LoaderFull';
+import { toastCustom } from '@/components/Toast';
+import { ROUTES_ADMIN } from '@/features/admin/routes';
+import { ROUTES_APP } from '@/features/app/routes';
+import { zOAuthProvider } from '@/features/auth/oauth-config';
+import { ROUTES_AUTH } from '@/features/auth/routes';
+import { trpc } from '@/lib/trpc/client';
+
+export default function PageOAuthCallback() {
+  const { i18n, t } = useTranslation(['auth']);
+  const router = useRouter();
+  const isTriggeredRef = useRef(false);
+  const params = z
+    .object({ provider: zOAuthProvider() })
+    .safeParse(useParams());
+  const searchParams = z
+    .object({ code: z.string(), state: z.string() })
+    .safeParse({
+      code: useSearchParams().get('code'),
+      state: useSearchParams().get('state'),
+    });
+  const validateLogin = trpc.oauth.validateLogin.useMutation({
+    onSuccess: (data) => {
+      if (data.account.authorizations.includes('ADMIN')) {
+        router.replace(ROUTES_ADMIN.root());
+        return;
+      }
+      router.replace(ROUTES_APP.root());
+    },
+    onError: () => {
+      toastCustom({
+        status: 'error',
+        title: t('auth:login.feedbacks.loginError.title'),
+      });
+      router.replace(ROUTES_AUTH.login());
+    },
+  });
+
+  useEffect(() => {
+    const trigger = () => {
+      if (isTriggeredRef.current) return;
+      isTriggeredRef.current = true;
+
+      if (!(params.success && searchParams.success)) {
+        notFound();
+      }
+
+      validateLogin.mutate({
+        provider: params.data.provider,
+        code: searchParams.data.code,
+        state: searchParams.data.state,
+        language: i18n.language,
+      });
+    };
+    trigger();
+  }, [validateLogin, params, searchParams, i18n]);
+
+  return <LoaderFull />;
+}