Login and Signup Page #1 (Fiona) #3

fionapeng16 · 2024-11-22T06:56:57Z

Created Login and Signup pages:

Login Page (/login)

created Next.js Form with the following fields: Student Email, Student ID, Password
added a "Sign Up" button that redirects users to the /signup page
temporarily logs the form data in JSON format to the server console for verification

SignUp Page (/signup)

created Next.js Form with the following fields: Student Email, Student ID, Password, Confirm Password
verifies passwords match
added a "Log In" button that redirects users to the /login page
temporarily logs the form data in JSON format to the server console for verification
LoginPage and SignUpPage components

UPDATE:

/login (/login/eo-admin, /login/school-admin, /login/students)
/signup (/signup/eo-admin, /signup/school-admin, /signup/students)

created signUp.ts, signIn.ts, and logout.ts files using the Firebase documentation (under /firebase/auth)
called these functions in the UI (signUp and signIn)
created separate login and signup pages for school-admin, eo-admin, and students (/login and /signup each have a menu that allows user to select who they want to signup/login as)
differentiated between the roles so when the user signs in, it checks if their role when they signed up (determined by which signup page they used) matches the signin page role (it querys the firestore to find the user)
still need to have the eo-admin approve school-admin and still need to implement logout

coshio · 2024-11-22T23:02:21Z

src/app/login/page.tsx

+// interface metadata {
+//     title: string;
+// }
+export const metadata = {
+    title: 'Log In',
+};


make sure to remove any unused code for the PR (this can be done in this PR or if you can follow up with this in the next PR that would be great!)

…with next 14

coshio · 2024-11-26T04:05:16Z

We reverted back to Next 14 which means that the old Form component that was used isn't compatible. This was changed in the latest commit

…nd-overdose into login-and-signup-1

…'t do signin auth yet - will do soon

… if the role doesn't match your own

…to login-and-signup-1

joycechen721 · 2024-12-06T01:30:50Z

src/firebase/auth/logout.ts

@@ -0,0 +1,13 @@
+import firebase_app from '@/firebase/config';


make this function be executed on the server by including the "use server" directive at the very top!

joycechen721 · 2024-12-06T01:31:04Z

src/firebase/auth/signIn.ts

@@ -0,0 +1,20 @@
+import firebase_app from '@/firebase/config';


"use server" here too

joycechen721 · 2024-12-06T01:31:12Z

src/firebase/auth/signUp.ts

@@ -0,0 +1,24 @@
+import firebase_app from '@/firebase/config';


"use server"

joycechen721 · 2024-12-06T01:47:39Z

src/firebase/auth/signUp.ts

+export default async function signUp(
+    email: string,
+    password: string
+): Promise<{ result: UserCredential | null; error: Error | null }> {


you'll probably encounter this error after adding "use server" because you'll now be calling a server action when you call "signUp" in the signup pages, which are client components -- basically there are certain restrictions in place when you pass data between server and client components "Error: Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported."

so instead of returning the UserCredential object, return a serialized version of the result.

joycechen721 · 2024-12-06T01:47:55Z

src/firebase/auth/signUp.ts

+export default async function signUp(
+    email: string,
+    password: string
+): Promise<{ result: UserCredential | null; error: Error | null }> {


Promise<{
result: SignUpResult | null;
error: string | null;
}>

type SignUpResult = { userId: string; email: string | null };

joycechen721 · 2024-12-06T04:24:29Z

src/firebase/auth/signUp.ts

+            email,
+            password
+        );
+        return { result, error: null };


return {
result: serializedResult,
error: null,
};

joycechen721 · 2024-12-06T04:24:44Z

src/firebase/auth/signUp.ts

+        );
+        return { result, error: null };
+    } catch (error) {
+        return { result: null, error: error as Error };


return { result: null, error: (error as Error).message };

joycechen721

thanks fiona!! just a few refactoring to do with the functions but otherwise looks amazing <3

joycechen721 · 2024-12-06T04:33:28Z

src/app/signup/school-admin/page.tsx

+            setError(error.message);
+        } else {
+            try {
+                const db = getFirestore();


we'll probably have extract this firebase update into a server component or route handler in the future :D but dw about it for now!!

login and signup page outlines - not connected to backend yet

2a921b2

fionapeng16 requested review from joycechen721 and coshio November 22, 2024 06:56

fionapeng16 self-assigned this Nov 22, 2024

coshio reviewed Nov 22, 2024

View reviewed changes

Changed old Next 15 Form component to use HTML form to be compatible …

42d83f1

…with next 14

fionapeng16 and others added 8 commits November 27, 2024 14:49

removed next.config.ts

a702c8d

Merge branch 'login-and-signup-1' of https://github.com/lablueprint/e…

74c65d1

…nd-overdose into login-and-signup-1

added new pages for students, eo-admin, and school-admin

c032272

First api for users

b0abeb7

added auth for signup (creates new user in authentication) but i didn…

b24e727

…'t do signin auth yet - will do soon

oops i forgot to save signIn.ts

523ba8a

differentiated between roles (school admin, eo admin) - cannot log in…

f2bfa71

… if the role doesn't match your own

Merge branch 'main' of https://github.com/lablueprint/end-overdose in…

344d26a

…to login-and-signup-1

joycechen721 reviewed Dec 6, 2024

View reviewed changes

src/firebase/auth/signIn.ts

@@ -0,0 +1,20 @@

import firebase_app from '@/firebase/config';

Copy link

Collaborator

joycechen721 Dec 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"use server" here too

joycechen721 reviewed Dec 6, 2024

View reviewed changes

src/firebase/auth/signUp.ts

@@ -0,0 +1,24 @@

import firebase_app from '@/firebase/config';

Copy link

Collaborator

joycechen721 Dec 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"use server"

joycechen721 reviewed Dec 6, 2024

View reviewed changes

joycechen721 requested changes Dec 6, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Login and Signup Page #1 (Fiona) #3

Login and Signup Page #1 (Fiona) #3

fionapeng16 commented Nov 22, 2024 •

edited

Loading

coshio Nov 22, 2024

coshio commented Nov 26, 2024

joycechen721 Dec 6, 2024

joycechen721 Dec 6, 2024

joycechen721 Dec 6, 2024

joycechen721 Dec 6, 2024

joycechen721 Dec 6, 2024 •

edited

Loading

joycechen721 Dec 6, 2024

joycechen721 Dec 6, 2024

joycechen721 left a comment

joycechen721 Dec 6, 2024

		@@ -0,0 +1,13 @@
		import firebase_app from '@/firebase/config';

		@@ -0,0 +1,20 @@
		import firebase_app from '@/firebase/config';

		@@ -0,0 +1,24 @@
		import firebase_app from '@/firebase/config';

Login and Signup Page #1 (Fiona) #3

Are you sure you want to change the base?

Login and Signup Page #1 (Fiona) #3

Conversation

fionapeng16 commented Nov 22, 2024 • edited Loading

Choose a reason for hiding this comment

coshio commented Nov 26, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

joycechen721 Dec 6, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

joycechen721 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fionapeng16 commented Nov 22, 2024 •

edited

Loading

joycechen721 Dec 6, 2024 •

edited

Loading