feat(portal): scaffold auth

Author: MFarabi619

apps/axiom/src/app/(payload)/api/auth/[...all]/route.ts

@@ -0,0 +1,4 @@
+import { auth } from "@/lib/auth";
+import { toNextJsHandler } from "better-auth/next-js";
+
+export const { GET, POST } = toNextJsHandler(auth.handler);

apps/axiom/src/payload.config.ts

@@ -1,12 +1,13 @@
 // THEME CREDITS: github.com/akhrarovsaid/payload-theme-quantum-leap
 // github.com/jhb-software/payload-plugins/tree/main/geocoding
 import path from "node:path";
-// import { s3Storage } from '@payloadcms/storage-s3'
 /* eslint-disable node/prefer-global/process */
+// import { s3Storage } from '@payloadcms/storage-s3'
 import { fileURLToPath } from "node:url";
 import {
-  // googleOAuth,
-         linkedinOAuth } from '@/cms/endpoints/auth'
+  googleOAuth,
+         linkedinOAuth
+} from '@/cms/endpoints/auth'
 import {Brands} from "@/db/collections"
 import { Media, Users, Emails } from "@/db/collections/models";
 import {Website, SocialLinks} from "@/db/collections/globals";
@@ -102,6 +103,8 @@ export default buildConfig({
     generateSchemaOutputFile: path.resolve("../../libs/db/schema.ts"),
   }),
   plugins: [
+    googleOAuth,
+    linkedinOAuth
     // process.env.NODE_ENV == 'production' && s3Storage({
     //   collections: {
     //     media: {
@@ -120,8 +123,5 @@ export default buildConfig({
     //     endpoint: process.env.S3_ENDPOINT,
     //   },
     // }),
-    // googleOAuth,
-    linkedinOAuth
-    // payloadCloudPlugin(),
   ],
 });

auth.ts

@@ -0,0 +1,15 @@
+import {
+    betterAuth
+} from 'better-auth';
+
+export const auth = betterAuth({
+    socialProviders: {
+        linkedin: {
+            clientId: process.env.LINKEDIN_CLIENT_ID,
+            clientSecret: process.env.LINKEDIN_CLIENT_SECRET
+        }
+    },
+
+    /** if no database is provided, the user data will be stored in memory.
+     * Make sure to provide a database to persist user data **/
+});

libs/db/payload-types.ts

@@ -213,7 +213,7 @@ export interface User {
    * This could be a company, university, or student club.
    */
   brandRelation?: (number | null) | Brand;
-  linkedIn?: string | null;
+  linkedin?: string | null;
   discord?: string | null;
   github?: string | null;
   behance?: string | null;
@@ -264,6 +264,11 @@ export interface User {
   emergencyContactFullName?: string | null;
   emergencyContactCell?: string | null;
   emergencyContactEmailAddress?: string | null;
+  linkedinSub?: string | null;
+  linkedinEmailVerified?: string | null;
+  linkedinLocale?: string | null;
+  googleSub?: string | null;
+  googleEmailVerified?: string | null;
   sub?: string | null;
   updatedAt: string;
   createdAt: string;
@@ -432,7 +437,7 @@ export interface UsersSelect<T extends boolean = true> {
   pronouns?: T;
   avatar?: T;
   brandRelation?: T;
-  linkedIn?: T;
+  linkedin?: T;
   discord?: T;
   github?: T;
   behance?: T;
@@ -443,6 +448,11 @@ export interface UsersSelect<T extends boolean = true> {
   emergencyContactFullName?: T;
   emergencyContactCell?: T;
   emergencyContactEmailAddress?: T;
+  linkedinSub?: T;
+  linkedinEmailVerified?: T;
+  linkedinLocale?: T;
+  googleSub?: T;
+  googleEmailVerified?: T;
   sub?: T;
   updatedAt?: T;
   createdAt?: T;

libs/portal/features/login/ui/call-to-action.tsx

@@ -3,6 +3,7 @@ import { Button } from '@cuhacking/shared/ui/button'
 import { GlassmorphicCard } from '@cuhacking/shared/ui/glassmorphic-card'
 import { Typography } from '@cuhacking/shared/ui/typography'
 import { Form, useNavigation } from '@remix-run/react'
+import { signIn } from '../../../pages/login/index'
 
 export function LoginCallToAction() {
   const transition = useNavigation()
@@ -28,6 +29,12 @@ export function LoginCallToAction() {
           className="flex items-center gap-x-3 px-4 md:px-6 lg:px-8 py-4"
           aria-label="Login with Linkedin"
           disabled={transition.state === 'submitting'}
+          onClick={async () => {
+            await signIn.social({
+              provider: 'linkedin',
+              callbackURL: '/hello',
+            })
+          }}
         >
           <img src={linkedinBlack} alt="Linkedin logo" className="size-5" />
           <Typography variant="h6">Log In</Typography>

libs/portal/pages/login/index.tsx

@@ -1,5 +1,17 @@
 import dashboard_background from '@cuhacking/portal/assets/backgrounds/dashboard-bg-1.webp'
 import { LoginCallToAction } from '@cuhacking/portal/features/login'
+import { createAuthClient } from 'better-auth/react'
+
+export const authClient = createAuthClient({
+  baseURL: process.env.development ? process.env.CUHACKING_2025_AXIOM_LOCAL_URL : process.env.CUHACKING_2025_AXIOM_PUBLIC_URL,
+})
+
+export const {
+  signIn,
+  signOut,
+  signUp,
+  useSession,
+} = authClient
 
 export function Login() {
   return (