feat: Add skeleton for SSO, add google as testing provider

VitNode · Nov 24, 2024 · b0280fb · b0280fb
1 parent 27e0c7b
commit b0280fb
Show file tree

Hide file tree

Showing 25 changed files with 338 additions and 86 deletions.
diff --git a/apps/frontend/src/plugins/core/langs/en.json b/apps/frontend/src/plugins/core/langs/en.json
@@ -232,6 +232,7 @@
     "sign_in": {
       "title": "Login",
       "desc": "You don't have an account? <link></link>.",
+      "or": "or",
       "sign_up": "Sign Up",
       "email": "Email",
       "password": "Password",

diff --git a/packages/backend/src/core/auth/auth.module.ts b/packages/backend/src/core/auth/auth.module.ts
@@ -11,6 +11,7 @@ import { HelperSignUpAuthService } from './services/sign_up/helper.service';
 import { SendConfirmEmailAuthService } from './services/sign_up/send.confirm_email.service';
 import { SignUpAuthService } from './services/sign_up/sign_up.service';
 import { SettingsAuthModule } from './settings/settings.module';
+import { SSOAuthModule } from './sso/sso.module';
 
 @Module({
   providers: [
@@ -25,6 +26,6 @@ import { SettingsAuthModule } from './settings/settings.module';
     SignOutAuthService,
   ],
   controllers: [AuthController],
-  imports: [SettingsAuthModule],
+  imports: [SettingsAuthModule, SSOAuthModule],
 })
 export class AuthModule {}
diff --git a/packages/backend/src/core/auth/services/sign_in.service.ts b/packages/backend/src/core/auth/services/sign_in.service.ts
@@ -220,7 +220,7 @@ export class SignInAuthService {
         avatar_color: true,
       },
     });
-    if (!user) {
+    if (!user?.password) {
       throw new HttpException('ACCESS_DENIED', HttpStatus.UNAUTHORIZED);
     }
 

diff --git a/packages/backend/src/core/auth/sso/sso.controller.ts b/packages/backend/src/core/auth/sso/sso.controller.ts
@@ -0,0 +1,66 @@
+import { SSOAuthHelper } from '@/helpers/auth/sso.service';
+import {
+  Controller,
+  ForbiddenException,
+  Get,
+  Param,
+  Query,
+} from '@nestjs/common';
+import { ConfigService } from '@nestjs/config';
+import { ApiTags } from '@nestjs/swagger';
+import { SSOUrlAuthObj } from 'vitnode-shared/auth/sso.dto';
+
+@ApiTags('Core')
+@Controller('core/auth/sso')
+export class SSOAuthController {
+  constructor(
+    private readonly configService: ConfigService,
+    private readonly ssoHelper: SSOAuthHelper,
+  ) {}
+
+  @Get(':provider/callback')
+  async callbackSSO(
+    @Param('provider') provider: string,
+    @Query() query: Record<string, string>,
+  ) {
+    const frontendUrl: string = this.configService.getOrThrow('frontend_url');
+
+    const body = {
+      client_id: '',
+      client_secret: '',
+      code: query.code,
+      grant_type: 'authorization_code',
+      redirect_uri: `${frontendUrl}/login/sso/google/callback`,
+    };
+
+    const res = await fetch('https://oauth2.googleapis.com/token', {
+      method: 'POST',
+      body: JSON.stringify(body),
+    });
+
+    const tokenData: {
+      access_token?: string;
+    } = await res.json();
+    if (!tokenData.access_token) {
+      throw new ForbiddenException('Invalid token');
+    }
+
+    const userInfoResponse = await fetch(
+      'https://www.googleapis.com/oauth2/v2/userinfo',
+      {
+        headers: {
+          Authorization: `Bearer ${tokenData.access_token}`,
+        },
+      },
+    );
+
+    const userInfo = await userInfoResponse.json();
+
+    return 'callback';
+  }
+
+  @Get(':provider')
+  getUrlSSO(@Param('provider') provider: string): SSOUrlAuthObj {
+    return this.ssoHelper.getSSO(provider).getUrl();
+  }
+}
diff --git a/packages/backend/src/core/auth/sso/sso.module.ts b/packages/backend/src/core/auth/sso/sso.module.ts
@@ -0,0 +1,7 @@
+import { Module } from '@nestjs/common';
+import { SSOAuthController } from './sso.controller';
+
+@Module({
+  controllers: [SSOAuthController],
+})
+export class SSOAuthModule {}
diff --git a/packages/backend/src/core/middleware/services/show.service.ts b/packages/backend/src/core/middleware/services/show.service.ts
@@ -9,13 +9,15 @@ import { ManifestWithLang } from 'vitnode-shared/manifest.dto';
 import { ShowMiddlewareObj } from 'vitnode-shared/middleware.dto';
 
 import { NavMiddlewareService } from './nav.service';
+import { SSOAuthHelper } from '@/helpers/auth/sso.service';
 
 @Injectable()
 export class ShowMiddlewareService {
   constructor(
     private readonly databaseService: InternalDatabaseService,
     private readonly mailService: EmailHelperService,
     private readonly navService: NavMiddlewareService,
+    private readonly ssoHelper: SSOAuthHelper,
   ) {}
 
   protected async getManifest({
@@ -78,6 +80,13 @@ export class ShowMiddlewareService {
         force_login: config.settings.authorization.force_login,
         lock_register: config.settings.authorization.lock_register,
       },
+      auth_methods: {
+        password: true,
+        sso: this.ssoHelper.getSSOs().map(sso => ({
+          name: sso.name,
+          code: sso.code,
+        })),
+      },
       plugins: ['admin', 'core', ...plugins.map(plugin => plugin.code)],
       languages_code_default: langs.find(lang => lang.default)?.code ?? 'en',
       is_email_enabled: this.mailService.checkIfEnable(),

diff --git a/packages/backend/src/database/schema/users.ts b/packages/backend/src/database/schema/users.ts
@@ -11,7 +11,7 @@ export const core_users = pgTable(
     name_seo: t.varchar({ length: 255 }).notNull().unique(),
     name: t.varchar({ length: 255 }).notNull().unique(),
     email: t.varchar({ length: 255 }).notNull().unique(),
-    password: t.varchar().notNull(),
+    password: t.varchar(),
     joined_at: t.timestamp().notNull().defaultNow(),
     newsletter: t.boolean().notNull().default(false),
     avatar_color: t.varchar({ length: 6 }).notNull(),
@@ -39,7 +39,7 @@ export const core_users = pgTable(
   ],
 );
 
-export const core_users_relations = relations(core_users, ({ one }) => ({
+export const core_users_relations = relations(core_users, ({ one, many }) => ({
   group: one(core_groups, {
     fields: [core_users.group_id],
     references: [core_groups.id],
@@ -56,8 +56,27 @@ export const core_users_relations = relations(core_users, ({ one }) => ({
     fields: [core_users.id],
     references: [core_users_confirm_emails.user_id],
   }),
+  sso: many(core_users_sso_tokens),
 }));
 
+export const core_users_sso_tokens = pgTable(
+  'core_users_sso_tokens',
+  t => ({
+    id: t.serial().primaryKey(),
+    user_id: t
+      .integer()
+      .references(() => core_users.id, {
+        onDelete: 'cascade',
+      })
+      .notNull(),
+    provider: t.varchar({ length: 100 }).notNull(),
+    id_provider: t.varchar({ length: 255 }).notNull(),
+    created_at: t.timestamp().notNull().defaultNow(),
+    updated_at: t.timestamp().notNull().defaultNow(),
+  }),
+  t => [index('core_users_sso_tokens_user_id_idx').on(t.user_id)],
+);
+
 export const core_files_avatars = pgTable('core_files_avatars', t => ({
   id: t.serial().primaryKey(),
   dir_folder: t.varchar({ length: 255 }).notNull(),

diff --git a/packages/backend/src/helpers/auth/sso.service.ts b/packages/backend/src/helpers/auth/sso.service.ts
@@ -0,0 +1,51 @@
+import { Injectable, NotFoundException } from '@nestjs/common';
+import { ConfigService } from '@nestjs/config';
+import { SSOUrlAuthObj } from 'vitnode-shared/auth/sso.dto';
+
+export interface SSOAuthItem {
+  name: string;
+  enabled: boolean;
+  getUrl: () => SSOUrlAuthObj;
+  code: string;
+}
+
+@Injectable()
+export class SSOAuthHelper {
+  constructor(private readonly configService: ConfigService) {}
+
+  getSSO(code: string): SSOAuthItem {
+    const item = this.getSSOs().find(sso => sso.code === code);
+    if (!item) {
+      throw new NotFoundException(`SSO provider with ${code} code not found`);
+    }
+
+    return item;
+  }
+
+  getSSOs(): SSOAuthItem[] {
+    const frontendUrl: string = this.configService.getOrThrow('frontend_url');
+    const redirectUri = (code: string) =>
+      `${frontendUrl}/login/sso/${code}/callback`;
+
+    return [
+      {
+        name: 'Google',
+        code: 'google',
+        enabled: true,
+        getUrl: () => {
+          const params = new URLSearchParams({
+            client_id:
+              '1067408430287-igio7a4koou4i26n8vvmqo4eqtcp9gka.apps.googleusercontent.com',
+            redirect_uri: redirectUri('google'),
+            response_type: 'code',
+            scope: 'openid profile email',
+          });
+
+          return {
+            url: `https://accounts.google.com/o/oauth2/v2/auth?${params.toString()}`,
+          };
+        },
+      },
+    ];
+  }
+}
diff --git a/packages/backend/src/helpers/helpers.module.ts b/packages/backend/src/helpers/helpers.module.ts
@@ -19,6 +19,7 @@ import {
 import { FilesHelperService } from './files/files-helper.service';
 import { StringLanguageHelper } from './string_language/helpers.service';
 import { UserHelper } from './user.service';
+import { SSOAuthHelper } from './auth/sso.service';
 
 @Global()
 @Module({})
@@ -62,6 +63,7 @@ export class GlobalHelpersModule {
         DeviceAuthService,
         UserHelper,
         FilesHelperService,
+        SSOAuthHelper,
       ],
       exports: [
         EmailHelperService,
@@ -73,6 +75,7 @@ export class GlobalHelpersModule {
         DeviceAuthService,
         UserHelper,
         FilesHelperService,
+        SSOAuthHelper,
       ],
     };
   }

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
@@ -165,7 +165,6 @@
     "cropperjs": "^1.6.2",
     "embla-carousel-react": "^8.5.1",
     "emoji-mart": "^5.6.0",
-    "framer-motion": "^11.11.17",
     "html-react-parser": "^5.1.18",
     "lodash": "^4.17.21",
     "lowlight": "^3.1.0",

diff --git a/packages/frontend/src/components/ui/tag-input.tsx b/packages/frontend/src/components/ui/tag-input.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { AnimatePresence, motion } from 'framer-motion';
 import { X } from 'lucide-react';
 import React from 'react';
 
@@ -47,48 +46,43 @@ export const TagInput = ({
     <div className="space-y-3">
       {values.length > 0 && (
         <div className="flex flex-wrap items-center gap-2">
-          <AnimatePresence>
-            {values.map(item => {
-              const onRemove = () => {
-                if (multiple) {
-                  onChange(values.filter(value => value.id !== item.id));
+          {values.map(item => {
+            const onRemove = () => {
+              if (multiple) {
+                onChange(values.filter(value => value.id !== item.id));
 
-                  return;
-                }
+                return;
+              }
 
-                onChange();
-              };
+              onChange();
+            };
 
-              return (
-                <motion.div
-                  animate={{ opacity: 1, scale: 1 }}
-                  className={badgeVariants({
-                    variant: 'outline',
-                    className: 'shrink-0 cursor-pointer [&>svg]:size-4',
-                  })}
-                  exit={{ opacity: 0, scale: 0.5 }}
-                  initial={{ opacity: 0, scale: 0.5 }}
-                  key={item.id}
-                  layout
-                  onClick={e => {
+            return (
+              <div
+                className={badgeVariants({
+                  variant: 'outline',
+                  className: 'shrink-0 cursor-pointer [&>svg]:size-4',
+                })}
+                key={item.id}
+                onClick={e => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  onRemove();
+                }}
+                onKeyDown={e => {
+                  if (e.key === 'Enter') {
                     e.stopPropagation();
                     e.preventDefault();
                     onRemove();
-                  }}
-                  onKeyDown={e => {
-                    if (e.key === 'Enter') {
-                      e.stopPropagation();
-                      e.preventDefault();
-                      onRemove();
-                    }
-                  }}
-                  tabIndex={0}
-                >
-                  {item.value} <X />
-                </motion.div>
-              );
-            })}
-          </AnimatePresence>
+                  }
+                }}
+                role="button"
+                tabIndex={0}
+              >
+                {item.value} <X />
+              </div>
+            );
+          })}
         </div>
       )}
 

diff --git a/packages/frontend/src/views/admin/views/members/create/content.tsx b/packages/frontend/src/views/admin/views/members/create/content.tsx
@@ -22,7 +22,7 @@ export const ContentCreateUserUsersMembersAdmin = () => {
             const value: string = props.field.value ?? '';
 
             return (
-              <div className="space-y-1">
+              <>
                 <AutoFormInput {...props} />
                 {props.field.value.length > 0 && (
                   <span className="text-muted-foreground mt-2 block max-w-md truncate text-sm">
@@ -35,7 +35,7 @@ export const ContentCreateUserUsersMembersAdmin = () => {
                     })}
                   </span>
                 )}
-              </div>
+              </>
             );
           },
         },
@@ -63,7 +63,7 @@ export const ContentCreateUserUsersMembersAdmin = () => {
             }, 0);
 
             return (
-              <div className="space-y-1">
+              <>
                 <AutoFormInput {...props} type="password" />
                 {value.length > 0 && (
                   <div>
@@ -76,7 +76,7 @@ export const ContentCreateUserUsersMembersAdmin = () => {
                     />
                   </div>
                 )}
-              </div>
+              </>
             );
           },
         },

diff --git a/packages/frontend/src/views/theme/layout/nav-bar-mobile/content/footer/user-footer.tsx b/packages/frontend/src/views/theme/layout/nav-bar-mobile/content/footer/user-footer.tsx
@@ -12,7 +12,7 @@ export const UserFooterNavBarMobile = () => {
   const { onSubmit } = useSignOutApi({});
 
   return (
-    <div className="my-4 flex flex-col px-2">
+    <div className="mb-4 flex flex-col px-2">
       {user?.is_admin && (
         <>
           <Separator className="my-1" />