[feat + style] Sign Up + Sign In page: basic implementation w/ Supabase and styling

[RohinJ444]

🍞 What's new in this PR

🥐 Description

Took the basic back-end login and signup functionality I had in one login page earlier and created two new styled pages: a sign-up page (app/auth/signup/page.tsx) and a sign in page (app/auth/signin/page.tsx). I created styled components in app/auth/auth-styles.ts for both pages. The page remains centered with varying screen sizes. I saw some minor style/design changes made to Figma this afternoon and those are reflected in the implementation.

Confirmation emails need to be configured in Supabase settings, but after that, basic sign-up and sign-in functionality should be fully implemented. I describe some more features that would complete / enhance the authentication process in next steps. For now, I also added an error message at the bottom of the white card in the center of the page to make it easier to validate whether logins/signups were successful.

🥖 Screenshots

🥪 How to review

Functionality

Basically everything is in the first commit with user authentication and styling. The signup page (app/auth/signup/page.tsx) takes as input an email, password, and confirmed password. It should display an error if passwords do not match or if the email is invalid. The login page (app/auth/signin/page.tsx) takes as input an email and password, and it should display an error if the login credentials are invalid. The supabase user table to track users and auth requests is linked here: https://supabase.com/dashboard/project/paifoskjfzbjbiehraqj/auth/users

Styling

Uses flexbox so it should remain centered with varying screen sizes. I believe all fonts, colors, and font sizes should match the Figma now, except for the temporary error message I added as discussed above. All the styled components I created for the page can be found in app/auth/auth-styles.ts

Testing

Because the SMTP confirmation email isn't set up yet, sign up functionality isn't quite there right now, but you can test login with the following email + password I added to the users table

Email: [email protected]
Password: vignesh

🥧 Next steps

Functionality

• Confirmation emails do not fully work yet—this has to do with Supabase Auth settings (I currently don't have permission to change these). As a result, any users who don't have a @berkeley.edu email will get an error that confirmation email failed when attempting to sign up.
• "Continue with Google" is a dummy button as of now, it does not provide any functionality
• Does not yet have a "forgot password" option
• Does not yet check whether user with specified email already exists during sign-up
• Does not redirect anywhere after signup or signin. For now, I added a temporary message state that displays whether sign-ups and logins were successful so I could validate that supabase was actually working.

Styling

• Small thing, but I couldn't get the drop shadow to properly render around the white card idk why 😭
• Also small, but I don't know if I used the correct shade of blue for the hyperlinks at the bottom of each page

🥞 Relevant links

🥨 Online sources

https://styled-components.com/docs/basics#adapting-based-on-props

Referenced these PRs:
https://github.com/calblueprint/immigration-justice-project/pull/24/files
https://github.com/calblueprint/immigration-justice-project/pull/27/files

🥯 Related PRs

CC: @celinechoiii

[celinechoiii]

can you change the auth folder name to (auth)?

[celinechoiii]

update all imports using the alias! for example: import COLORS from '@/styles/colors';

[celinechoiii]

Update to <Link href="/signin">

[celinechoiii]

Update to <Link href="/signup">