Henosia

Authentication

The first thing you need to do with your new authentication setup is to create a login for yourself, such that you can get access to your project again. Click on the Sign up link at the bottom of the login screen.

A close up of the login modal, with the sign up option at the bottom.

Enter your email, pick a password and repeat it, and click Sign up.

A close up of the sign up modal. It contains three fields, an email field a password field and a repeat password field. At the bottom the call to action button says Sign up.

Then you see this message, asking you to confirm your mail address:

A message saying: Thank you for signing up! Check your email to confirm. You've fully signed up. Please chack your email to confirm your account before signing in.

The mail you receive to confirm your mail address, looks like this:

An image of the confirmation email. It reads: Confirm your signup. Follow this link to confirm your user. Below is a confirm link with the text Confirm your mail.

Go ahead and click the link, but be prepared that it does not return you to Henosia. It will open the page http://localhost:3000 and this will look like a page unable to load. The confirmation worked as it should, however, and when you go back to Henosia, you are now able to login with your credentials.

If you visit Supabase and look under Authentication, you should be able to see yourself as an entry in the list of people with credentials for your project. as other people sign up, they will also show up here.

screenshot from Supabase showing the table of registered users. The table has columns for UUID, Display name, Email, Phone, Providers, Provider type, Created at and Last sign in at. There is one entry in the table

Once you're logged in, you land on a page called /protected that looks like this:

A screenshot of the /protected page. It is blank except one line of text reading Hello <email address>, followed by a logout button

This is most likely not where you want your users to land after login, but you can fix that with a prompt along the lines of:

After login the user should land on the front page, not on the page /protected.

So far your product may also have had hardcoded data about who was logged in, while there was no backend connected. You want that to be changed to use Supabase and reflect who is actually logged in. This is a bigger ask, however, so to avoid overloading the AI with one large prompt, let's break it up into several smaller prompts, starting with:

Please change the content of this button from the current mock data "John" to the name of the person logged in via Supabase.

A screenshot of Henosia. In the preview area The account button at the top is selected. It reads John. In the prompt field an indication that the button is selected and a prompt ready for submission. It reads "Please change the content of this button from the current mock data John to the name of the person logged in via Supabase.

Once it has completed this task, go to e.g. the account page, and go element by element and tell the AI what you want fixed. Read more about how to avoid overloading the AI with too complex prompts in Tips & Tricks

Similarly, there may be pages to which you don't require the user to be logged in and others where you do. For instance, in our shoe shop, we want people to be able to browse the shoes, put them in the basket etc. without being logged in. But account, previous orders, check out flow, etc. we want them logged in.

This, and any other tweaks you want to make to how authentication works can now be done via prompting.