add partner auth

acm-uiuc · Jul 12, 2024 · e72188d · e72188d
1 parent da1ef61
commit e72188d
Show file tree

Hide file tree

Showing 10 changed files with 132 additions and 61 deletions.
diff --git a/clientv2/package.json b/clientv2/package.json
@@ -19,6 +19,7 @@
   "dependencies": {
     "@azure/msal-browser": "^3.18.0",
     "@azure/msal-react": "^2.0.20",
+    "@kinde-oss/kinde-auth-react": "^4.0.1",
     "@mantine/core": "7.11.1",
     "@mantine/form": "^7.11.1",
     "@mantine/hooks": "7.11.1",

diff --git a/clientv2/src/Router.tsx b/clientv2/src/Router.tsx
@@ -7,6 +7,7 @@ import { HomePage } from './pages/Home.page';
 import { AuthRoleEnum, useAuth } from './components/AuthContext';
 import { LoginPage } from './pages/Login.page';
 import { StudentHomePage } from './pages/student/StudentHome.page';
+import { RecruiterHomePage } from './pages/recruiter/RecruiterHome.page';
 
 const unauthenticatedRouter = createBrowserRouter([
   {
@@ -22,7 +23,7 @@ const unauthenticatedRouter = createBrowserRouter([
 const recruiterRouter = createBrowserRouter([
   {
     path: '/',
-    element: <HomePage />,
+    element: <RecruiterHomePage />,
   },
   {
     path: '/login',

diff --git a/clientv2/src/components/AuthContext/index.tsx b/clientv2/src/components/AuthContext/index.tsx
@@ -6,6 +6,7 @@ import React, {
   useEffect,
 } from 'react';
 import { useMsal } from '@azure/msal-react';
+import { useKindeAuth } from '@kinde-oss/kinde-auth-react';
 import { AuthenticationResult, InteractionStatus } from '@azure/msal-browser';
 
 export enum AuthSourceEnum {
@@ -33,16 +34,15 @@ interface AuthContextDataWrapper {
   isLoggedIn: boolean;
   userData: AuthContextData | null;
   loginMsal: CallableFunction;
-  loginBasic: CallableFunction;
   logout: CallableFunction;
+  getToken: CallableFunction;
 }
 
 export type AuthContextData = {
   email?: string;
   name?: string;
   authenticationMethod?: AuthSourceEnum;
   role?: AuthRoleEnum;
-  authToken?: string;
 };
 
 export const AuthContext = createContext({} as AuthContextDataWrapper);
@@ -54,10 +54,20 @@ interface AuthProviderProps {
 }
 
 export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
-  const [userData, setUserData] = useState<AuthContextData | null>(null);
-  const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
-
   const { instance, inProgress, accounts } = useMsal();
+  const {isLoading, isAuthenticated, user, logout: kindeLogout, getToken: getKindeToken} = useKindeAuth();
+
+  const [userData, setUserData] = useState<AuthContextData | null>(null);
+  const [isLoggedIn, setIsLoggedIn] = useState<boolean>((isAuthenticated || accounts.length > 0) && !isLoading);
+  if (isAuthenticated && !isLoading && !userData) {
+    setUserData({
+      email: user?.email!,
+      name: `${user?.given_name} ${user?.family_name}`,
+      authenticationMethod: AuthSourceEnum.LOCAL,
+      role: AuthRoleEnum.RECRUITER
+    })
+    setIsLoggedIn(true);
+  }
 
   useEffect(() => {
     const handleRedirect = async () => {
@@ -70,7 +80,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
           email: accounts[0].username,
           name: accounts[0].name,
           authenticationMethod: AuthSourceEnum.MSAL,
-          role: AuthRoleEnum.STUDENT,
+          role: AuthRoleEnum.STUDENT
         });
         setIsLoggedIn(true);
       }
@@ -90,36 +100,46 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
           name: account.name,
           authenticationMethod: AuthSourceEnum.MSAL,
           role: AuthRoleEnum.STUDENT,
-          authToken: response.accessToken,
         });
         setIsLoggedIn(true);
       }
     }
   };
 
+  const getToken = async () => {
+    if (!userData) {
+      return null;
+    }
+    if (userData?.authenticationMethod === AuthSourceEnum.MSAL) {
+      return null;
+    } else if (userData?.authenticationMethod === AuthSourceEnum.LOCAL) {
+      return await getKindeToken();
+    } else {
+      throw new Error("Unknown authentication method.")
+    }
+  }
   const loginMsal = () => {
     instance.loginRedirect();
   };
 
-  const loginBasic = () => {
-    setIsLoggedIn(true);
-  };
-
-  const logout = () => {
+  const logout = async () => {
     if (userData?.authenticationMethod === AuthSourceEnum.MSAL) {
       instance?.logoutRedirect().then(() => {
         setIsLoggedIn(false);
         setUserData(null);
       });
     } else {
+      if (isAuthenticated && !isLoading) {
+        kindeLogout();
+      }
       setIsLoggedIn(false);
       setUserData(null);
     }
   };
 
   return (
     <AuthContext.Provider
-      value={{ isLoggedIn, userData, loginMsal, loginBasic, logout }}
+      value={{ isLoggedIn, userData, loginMsal, logout, getToken }}
     >
       {children}
     </AuthContext.Provider>

diff --git a/clientv2/src/components/LoginComponent/AcmLoginButton.tsx b/clientv2/src/components/LoginComponent/AcmLoginButton.tsx
@@ -12,7 +12,8 @@ export function AcmLoginButton(
     <Button
       disabled={inProgress === InteractionStatus.Login}
       leftSection={null}
-      variant="default"
+      color='#FF5F05'
+      variant="filled"
       {...props}
       onClick={() => {
         loginMsal();

diff --git a/clientv2/src/components/LoginComponent/PartnerLoginButton.tsx b/clientv2/src/components/LoginComponent/PartnerLoginButton.tsx
@@ -0,0 +1,21 @@
+import { Button, ButtonProps } from '@mantine/core';
+import { useAuth } from '../AuthContext';
+import { useKindeAuth } from '@kinde-oss/kinde-auth-react';
+
+export function PartnerLoginButton(
+  props: ButtonProps & React.ComponentPropsWithoutRef<'button'>,
+) {
+  const { login } = useKindeAuth();
+  return (
+    <Button
+      disabled={false}
+      leftSection={null}
+      variant="filled"
+      color='blue'
+      {...props}
+      onClick={() => {
+        login();
+      }}
+    />
+  );
+}
diff --git a/clientv2/src/components/LoginComponent/index.tsx b/clientv2/src/components/LoginComponent/index.tsx
@@ -12,6 +12,7 @@ import {
   Center,
 } from '@mantine/core';
 import { AcmLoginButton } from './AcmLoginButton';
+import { PartnerLoginButton } from './PartnerLoginButton';
 
 export function LoginComponent(props: PaperProps) {
   const form = useForm({
@@ -54,7 +55,7 @@ export function LoginComponent(props: PaperProps) {
 
       <Group grow mb="md" mt="md">
         <AcmLoginButton radius="xl">
-          ACM Login (Paid Members Only)
+          Sign in with Illinois NetID
         </AcmLoginButton>
       </Group>
 
@@ -64,43 +65,11 @@ export function LoginComponent(props: PaperProps) {
         my="md"
         size="lg"
       />
-
-      <form onSubmit={form.onSubmit(() => {})}>
-        <Stack>
-          <TextInput
-            required
-            label="Email"
-            placeholder="user@example.com"
-            value={form.values.email}
-            onChange={(event) =>
-              form.setFieldValue('email', event.currentTarget.value)
-            }
-            error={form.errors.email && 'Invalid email'}
-            radius="md"
-          />
-
-          <PasswordInput
-            required
-            label="Password"
-            placeholder="Your password"
-            value={form.values.password}
-            onChange={(event) =>
-              form.setFieldValue('password', event.currentTarget.value)
-            }
-            error={
-              form.errors.password &&
-              'Password should include at least 6 characters'
-            }
-            radius="md"
-          />
-        </Stack>
-
-        <Group justify="space-between" mt="xl">
-          <Button type="submit" radius="xl" style={{ width: '100%' }}>
-            Log In
-          </Button>
-        </Group>
-      </form>
+      <Group grow mb="md" mt="md">
+        <PartnerLoginButton radius="xl">
+          ACM@UIUC Partner Login
+        </PartnerLoginButton>
+      </Group>
     </Paper>
   );
 }
diff --git a/clientv2/src/main.tsx b/clientv2/src/main.tsx
@@ -3,8 +3,9 @@ import { MsalProvider } from '@azure/msal-react';
 import { Configuration, PublicClientApplication } from '@azure/msal-browser';
 import App from './App';
 import { AuthProvider } from './components/AuthContext';
+import {KindeProvider} from "@kinde-oss/kinde-auth-react";
 
-const configuration: Configuration = {
+const msalConfiguration: Configuration = {
   auth: {
     clientId: '5178a6b1-f46d-40a2-b550-1389b9316446',
     authority:
@@ -16,12 +17,19 @@ const configuration: Configuration = {
   },
 };
 
-const pca = new PublicClientApplication(configuration);
+const pca = new PublicClientApplication(msalConfiguration);
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
-  <MsalProvider instance={pca}>
-    <AuthProvider>
-      <App />
-    </AuthProvider>
-  </MsalProvider>,
+  <KindeProvider
+    clientId="fdacad7aea554755844105f5606da0f6"
+    domain="https://auth.acm.illinois.edu"
+    redirectUri={`${window.location.origin}/login`}
+    logoutUri={window.location.origin}
+  >
+    <MsalProvider instance={pca}>
+      <AuthProvider>
+        <App />
+      </AuthProvider>
+    </MsalProvider>
+  </KindeProvider>
 );
diff --git a/clientv2/src/pages/recruiter/RecruiterHome.page.tsx b/clientv2/src/pages/recruiter/RecruiterHome.page.tsx
@@ -0,0 +1,21 @@
+import { Badge, Title } from '@mantine/core';
+import { useAuth } from '@/components/AuthContext';
+import { HeaderNavbar } from '@/components/Navbar';
+
+export function RecruiterHomePage() {
+  const { userData } = useAuth();
+  const [lastName, firstName] = userData?.name?.split(',') as string[];
+  return (
+    <>
+      <HeaderNavbar userData={userData} />
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <Title>
+          Hello {firstName} {lastName}!
+        </Title>
+        <Badge color="blue" style={{ marginLeft: 10 }}>
+          Recruiter
+        </Badge>
+      </div>
+    </>
+  );
+}
diff --git a/clientv2/src/pages/student/StudentHome.page.tsx b/clientv2/src/pages/student/StudentHome.page.tsx
@@ -12,7 +12,7 @@ export function StudentHomePage() {
         <Title>
           Hello {firstName} {lastName}!
         </Title>
-        <Badge color="blue" style={{ marginLeft: 10 }}>
+        <Badge color="#FF5F05" style={{ marginLeft: 10 }}>
           Student
         </Badge>
       </div>

diff --git a/clientv2/yarn.lock b/clientv2/yarn.lock
@@ -1915,6 +1915,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@kinde-oss/kinde-auth-pkce-js@npm:^4.0.0-0":
+  version: 4.1.0
+  resolution: "@kinde-oss/kinde-auth-pkce-js@npm:4.1.0"
+  dependencies:
+    jwt-decode: "npm:^4.0.0"
+  checksum: 10c0/3d07395d3ecd2709f06d066903d1888ebd768564d2f99f33fe314ff6c70ce6a37d7c762d09344b6497674e0dbfbd02ef0d575aa824c3857690dcffb5aa5b56fe
+  languageName: node
+  linkType: hard
+
+"@kinde-oss/kinde-auth-react@npm:^4.0.1":
+  version: 4.0.1
+  resolution: "@kinde-oss/kinde-auth-react@npm:4.0.1"
+  dependencies:
+    "@kinde-oss/kinde-auth-pkce-js": "npm:^4.0.0-0"
+  peerDependencies:
+    react: ^17.0.2 || ^18
+    react-dom: ^17.0.2 || ^18
+  checksum: 10c0/c4a132c727270dc81fa7c9cfe23a9201687c3c389b544fbe14c281758aab485e37ab1c187a9bf86292e8368a5aa3867a0911cf67cb20f4da60edc3c001b91cb4
+  languageName: node
+  linkType: hard
+
 "@mantine/core@npm:7.11.1":
   version: 7.11.1
   resolution: "@mantine/core@npm:7.11.1"
@@ -3324,6 +3345,7 @@ __metadata:
     "@azure/msal-browser": "npm:^3.18.0"
     "@azure/msal-react": "npm:^2.0.20"
     "@eslint/compat": "npm:^1.1.1"
+    "@kinde-oss/kinde-auth-react": "npm:^4.0.1"
     "@mantine/core": "npm:7.11.1"
     "@mantine/form": "npm:^7.11.1"
     "@mantine/hooks": "npm:7.11.1"
@@ -6807,6 +6829,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jwt-decode@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "jwt-decode@npm:4.0.0"
+  checksum: 10c0/de75bbf89220746c388cf6a7b71e56080437b77d2edb29bae1c2155048b02c6b8c59a3e5e8d6ccdfd54f0b8bda25226e491a4f1b55ac5f8da04cfbadec4e546c
+  languageName: node
+  linkType: hard
+
 "keyv@npm:^4.5.3, keyv@npm:^4.5.4":
   version: 4.5.4
   resolution: "keyv@npm:4.5.4"