Supabase User Auth + Site Integration

Final Project

• Instructions
• Due: April 5, 2024
• Work in Assigned Pairs
• Create a Website that features:
  • A Directus CMS + Supabase Backend
  • User login and authentication
  • A Blog Collection Type
  • Authenticated User Customized Experience
• For this assignment, styling and design are NOT important at all
• Focus on backend services and features only

Review: Connect Supabase to Nuxt

• Use the Nuxt Supabase Module
• Steps:
  • install the module as a dev dependency
  • add it to your nuxt config in the modules list
  • create a .env file (project root) = Add your SUPABASE_URL and your SUPABASE_KEY
• The Supabase Nuxt Module is really a wrapper for the supabase-js module
  • under the hood it uses the same syntax and logc
  • Review syntax here

Javascript Review: Destructuring Assignment

• Destructuring is when you see things like:
• note the use of the spread operator, this will aggregate all the rest of the values not specified

const { a, b, ...rest } = objectWithPropertiesAnB;
const [firstVal, secondVal] = arrayOfAtLeastTwoItems;

Materials

• Video: Web Dev Simplified
• MDN: Destructuring assignment

Authentication

Configure User Signup

• Nuxt Supabase Auth Instructions
• How to set up user signup in nuxt
• Confiration page
  • set up a confirmation page to manage the redirect when a user does sign up.

Activity (pair code): User signup support

• first, set a policy on your film table that only authenticated users can read the data

How signup and authentication works

User Logout

• How to set up user logout

Activity (pair code): create a logout button

Verify user logout