Client auth

[RedHellier]

📌 Summary

Adds front end authentication, saves session, user and profile data.
Adds login page at /auth/login
Protects routes with specific access permissions
Displays correct Navbar depending on what role a user has

---

📁 What's Changed (in the front end)

• 1 Session, User and Profile Data and Supabase client

  • On the client side /src/routes/+layout.ts gets the session, user and profile data from supabase auth as well as the supabase client
  • On the server side /src/hooks.server.ts defines safeGetSession() that can be used to get session and user data but not the profile data
  • Data can be accessed in any +page.svelte or +layout.svelte by using

       let { data } = $props();
       let { session, supabase, user, profile } = $derived(data)
    

• 2 Route Protection

  • /src/hooks.server.ts defines authGuard() which checks if there is a session and a user.
    It redirects to / if a non logged in user accesses any pages that are not / or /resouces/[slug]
  • /src/routes/+layout.svelte checks if a profile has been logged in, and if so checks the role.
    It then displays either no Navbar (not logged in), a Navbar without the Admin Tools link (user logged in), or a Navbar with that link (admin logged in)
  • /src/routes/admin/+page.svelte checks if a profile has the admin role.
    It then displays admin links or text saying 'You don't have permission to be here'

• 3 .env Changes

  • .env needs to be renamed to .env.local
  • PUBLIC_SUPABASE_URL and PUBLIC_SUPABASE_ANON_KEY need to be added. Both can be found on the Supabase platform, I will also put them in the discord sst channel
  • We no longer need dotenv
  • env variables can now be imported in using
    import { [VARIABLE_NAME] } from '$env/static/public'

---

🧪 How to Test

1. Change .env to .env.local
2. Add new env variables
3. Run npm install (if new packages added)
4. Run npm run dev
5. Navigate to /auth/login
   • User Login -> email: me@me.com, password: mepass
   • Admin Login -> email: admin@me.com, password: adminpass

---

📋 Checklist

• Code compiles and runs
• Tests pass
• Linting passes (npm run lint)
• No console warnings or errors
• UI looks good on all screen sizes
• Reviewed by at least one team member

---

🧠 Notes for Reviewers

e.g. Check if component is accessible with keyboard/tab navigation.

[Jaz-spec]

Looks great!