Add oAuth logins

.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",

prisma/schema/auth.prisma

@@ -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/user.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[]
 }

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

@@ -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/env.mjs

@@ -6,6 +6,12 @@ import { z } from 'zod';
 const zNodeEnv = () =>
  z.enum(['development', 'test', 'production']).default('development');
 
+const zOptionalWithReplaceMe = () =>
+ z
+ .string()
+ .optional()
+ .transform((value) => (value === 'REPLACE ME' ? undefined : value));
+
 export const env = createEnv({
  /**
  * Specify your server-side environment variables schema here. This way you can ensure the app
@@ -15,6 +21,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 +92,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,

src/features/auth/OAuthLogin.tsx

@@ -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 { useToastError } from '@/components/Toast';
+import {
+ OAUTH_PROVIDERS,
+ OAUTH_PROVIDERS_ENABLED_ARRAY,
+ OAuthProvider,
+} from '@/lib/oauth/config';
+import { trpc } from '@/lib/trpc/client';
+
+export const OAuthLoginButton = ({
+ provider,
+ ...rest
+}: {
+ provider: OAuthProvider;
+} & ButtonProps) => {
+ const { t } = useTranslation(['auth']);
+ const router = useRouter();
+ const toastError = useToastError();
+ const loginWith = trpc.oauth.createAuthorizationUrl.useMutation({
+ onSuccess: (data) => {
+ router.push(data.url);
+ },
+ onError: (error) => {
+ toastError({
+ 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.some((p) => p.isEnabled)) 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.some((p) => p.isEnabled)) 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/PageLogin.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/PageOAuthCallback.tsx

@@ -0,0 +1,68 @@
+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 { useToastError } from '@/components/Toast';
+import { ROUTES_ADMIN } from '@/features/admin/routes';
+import { ROUTES_APP } from '@/features/app/routes';
+import { ROUTES_AUTH } from '@/features/auth/routes';
+import { zOAuthProvider } from '@/lib/oauth/config';
+import { trpc } from '@/lib/trpc/client';
+
+export default function PageOAuthCallback() {
+ const { i18n, t } = useTranslation(['auth']);
+ const toastError = useToastError();
+ 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: () => {
+ toastError({ 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 />;
+}

src/features/auth/PageRegister.tsx

@@ -14,6 +14,10 @@ import {
  FormFieldLabel,
 } from '@/components/Form';
 import { useToastError } from '@/components/Toast';
+import {
+ OAuthLoginButtonsGrid,
+ OAuthLoginDivider,
+} from '@/features/auth/OAuthLogin';
 import { ROUTES_AUTH } from '@/features/auth/routes';
 import {
  FormFieldsRegister,
@@ -87,6 +91,10 @@ export default function PageRegister() {
  </Box>
  </Button>
  </Stack>
+
+ <OAuthLoginButtonsGrid />
+ <OAuthLoginDivider />
+
  <Form
  {...form}
  onSubmit={(values) => {