Authentication 🔐 - Ella & Jack

[danglorioso]

Summary

For this sprint, you’ll add a secure authentication system to our site using BetterAuth that restricts access to admin users only.

Goals of this sprint:

• Implement an authentication system that will be used to only permit admin users to access the web app.
• Learn how many authentication systems are made using tables in the database to manage users, session information, and more.

⚙️ Setup

Before starting:

1. Pull the latest changes from main:

   git checkout main
   git pull
   

2. Create a new branch for this sprint:
   git checkout -b sprint3-auth
3. Install dependencies:
   npm install or npm i
4. Run the dev server and verify the site builds:
   npm run dev
5. Visit http://localhost:3000 to confirm everything runs.

🧭 Implementation

Step 1: Familiarize yourself with BetterAuth

• For authentication on this project, we are going to be using BetterAuth as opposed to options such as Auth.js or Clerk.
• For the first part of this ticket, you should do some research on BetterAuth and how it interacts with Next.js projects. Doing this work up front will make things significantly easier down the line.
• Here are some links to documentation and videos about BetterAuth that may help in your understanding. I highly recommend following the video included with some small caveats since we already have a database initialized: BetterAuth docs, BetterAuth Next.js integration, BetterAuth tutorial vid.

Step 2: Install BetterAuth

• This step is pretty simple, just use npm to install BetterAuth with the command npm install better-auth.
• This will add BetterAuth to package.json.

Step 3: Integrate BetterAuth into the project

• This is probably going to be the longest step of the sprint, but it will be significantly easier if you spent some time learning about BetterAuth beforehand. There are many resources out there that will guide you through this process, such as the videos included above as well as the documentation.
• BetterAuth’s documentation will tell you which files you need to create and which ones to modify. It is also important to note that we already have Drizzle and Neon configured from the previous round of sprints, so you will have to modify the src/lib/schema/ts file and push these changes to the database on Neon. These additional tables will deal with session and login data, as described in the documentation and the video.
• Also, make sure that you send any changes you make to your .env file to Dan and Shayne so they can share it with everyone.
• If you’re following the video, the guy in it refers to the “root directory” for our project, this is equivalent to the src/ directory. As a general rule of thumb, all code files that are not configuration files should be in src/.
• It is also important to note that there will only ever be one admin user. This doesn’t have a great effect on how you implement the ticket, but it is useful to know.
• Ideally Paula and Elyssa will be able to sign in with Google, so ensure that this feature is enabled.
• Paula and Elyssa want to sign in with an email address and password, so don’t worry about single sign-on (SSO) with third-party providers, like Google
• Currently, we won’t wrap the website in authentication. Therefore, you can create some dummy landing page that the user is redirected to after logging in showing success. Make this path easy to change later. If the user tries to access this page without being authenticated, it should not appear and/or show an error message with an error code of 401 (unauthorized). The page should also allow the user to log out.

Step 4: Testing

• Finally, you should test the authentication system to ensure that users can only access the dummy page after logging in.
• Users should not be able to just create an account and immediately gain access to the page, as this is a vulnerability.
• Users should be able to log out by clicking a button on the dummy landing page.

Acceptance Criteria

• BetterAuth is installed and added to package.json
• New database tables for authentication (users, sessions, etc.) are created in src/lib/schema.ts
• .env file updates have been shared with Dan and Shayne (don’t push them on GitHub!)
• Users are redirected to a dummy landing page after successful login
• The dummy landing page is protected and cannot be accessed without logging in
• Users can log in using email and password
• Users can log-out on the dummy landing page
• After logout, users cannot access the protected page without logging in again
• UI matches Figma
• Code runs locally without errors and builds successfully
• Merge via PR

Questions

If you get stuck or have questions:

• DM Dan or Shayne on Slack
• Come to office hours or ask during a hack night
• Ask questions during team meetings – we’re here to help!

Resources

• Figma: https://www.figma.com/design/hxC6tNqUqfygC7GOz8fcPG/JumboCode-MHD-Website
• React useState: https://react.dev/reference/react/useState
• React useEffect: https://react.dev/reference/react/useEffect
• Next.js Routing: https://nextjs.org/docs/app/building-your-application/routing
• Tailwind CSS Docs: https://tailwindcss.com/docs
• shadcn: https://ui.shadcn.com/docs/components/data-table
• npm: https://www.npmjs.com/
• BetterAuth: https://www.better-auth.com/