Zuvo Docs

Guide

Use Zuvo Auth with React

Learn how to use Zuvo Auth with React.js.

Quickstart

Create a new Zuvo project

Launch a new project in the Zuvo Studio.

Your new database has a table for storing your users. You can see that this table is currently empty by running some SQL in the SQL Editor.

      select * from auth.users;

`

Create a React app

Create a React app using a Vite template.

    npm create vite@latest my-app -- --template react

Install the Zuvo client library

Navigate to the React app and install the Zuvo libraries.

      cd my-app && npm install @supabase/supabase-js

Declare Zuvo Environment Variables

Rename .env.example to .env.local and populate with your Zuvo connection variables:

Get API details

To interact with data in database tables, you use the client libraries that wrap the auto-generated Data API endpoints, authenticating using the Project URL and key from the project Connect dialog.

Code sample: see project quickstart in Zuvo Studio.

Set up your login component

In App.jsx, create a Zuvo client using your Project URL and key.

The code uses the getClaims method in App.jsx to validate the local JWT before showing the signed-in user.

Code sample: see project quickstart in Zuvo Studio.

Customize email template

Before proceeding, change the email template to support a server-side authentication flow that sends a token hash:

  • Go to the Auth templates page in your dashboard.
  • Select the Confirm sign up template.
  • Change ConfirmationURL to SiteURL?token_hash=TokenHash&type=email.
  • Change your Site URL to https://localhost:5173

Start the app

Start the app, go to http://localhost:5173 in a browser, and open the browser console and you should be able to register and log in.

        npm run dev