Adding sign-up, login, and user accounts to an app does not necessarily mean manually configuring authentication, sessions, protected routes, and permissions. With Coderblock, you can describe the behavior you want in chat and let the agent handle the technical setup.

In this tutorial, you will learn how to:

• add sign-up and login;
• create a protected user area;
• manage sessions and protected routes;
• associate data with the authenticated user;
• configure roles such as customer and administrator;
• protect data with Row Level Security;
• add social login if needed;
• test authentication behavior before publishing the app.

Before you begin

Open the Coderblock project where you want to add authentication. You can start with an existing app or create a new project by describing what you want to build in natural language.

For example:

Create a platform for personal trainers where each client can create an account, view their workout plans, and track their progress. Trainers should have an admin area where they can manage clients.

If the app already exists, you can ask directly for user accounts to be added:

Add user sign-up and login. Each user should have a protected personal area after logging in.

Coderblock uses Supabase Auth to manage authentication and configures the required parts of the project, including sessions, protected routes, and database access policies.

---

1. Add sign-up and login

The easiest way to get started is to describe the user flow you want to offer. For example:

Add a sign-up page and a login page. Users should be able to create an account with an email address and password, then access their personal area after logging in.

The agent configures the required pages and connects the flow to Supabase Auth. You do not need to create a password table manually or implement JWTs or password hashing yourself. Once the changes are complete, check the live preview and try to:

1. create a new account;
2. log in;
3. log out;
4. log in again with the same account.

If you want to customize the flow, you can continue working through chat. For example:

Simplify the sign-up form and show clear error messages when the email address is already registered or the password is invalid.

2. Create a protected user area

Once login is configured, you can decide what authenticated users should see. For example:

Create an Account page that is only accessible to authenticated users. Show the user's name, email address, sign-up date, and a summary of their activity.

Coderblock can create the page and protect it so that users who are not logged in cannot access it. You can also ask it to protect multiple pages:

Protect the /account, /orders, and /settings pages. If an unauthenticated user tries to access them, redirect them to the login page.

Now try opening the protected URLs directly without logging in. An unauthenticated user should not be able to view the restricted content.

3. Connect data to the authenticated user

Authentication becomes truly useful when users can have personal data associated with their accounts. For example, for a booking platform, you could ask:

Add a bookings table. Each booking should be associated with the authenticated user and include a date, time, service, and status.

The agent can design the database structure and link each record to the authenticated user. You can then ask:

On the Account page, show only the bookings belonging to the currently authenticated user.

This principle can be applied to any type of personal data, including orders, appointments, documents, preferences, messages, or user-created content.

4. Protect data with Row Level Security

Protecting a page is not enough. If an app contains private data, you must also ensure that the database prevents users from reading or changing information that belongs to other accounts. Coderblock uses Postgres Row Level Security (RLS) for this purpose. For example, you can ask:

Make sure each user can only read and update their own bookings. Users must not be able to access data belonging to other accounts.

The agent configures the required policies based on the authenticated user. You can review the result in the editor's Backend tab, where you can access the project's tables, authenticated users, storage, and functions.

An important test

Create at least two test accounts. With the first account:

• create some data;
• confirm that it appears correctly.

Then log in with the second account and verify that the first account's data is not accessible. This test is especially important for applications that handle personal information, orders, documents, or other sensitive data.

5. Add roles and administrators

Many applications have more than one type of user. For example, you might have:

• customers;
• administrators;
• team members;
• moderators;
• teachers;
• professionals.

You can describe these roles directly in chat. For example:

Add customer and administrator roles. Customers can only view and update their own data, while administrators can access a protected dashboard and manage users and content.

Coderblock already includes a basic structure for profiles and roles, which the agent can use to configure the app's permissions. You can then ask:

Create an admin dashboard that is only accessible to users with the administrator role.

Next, test the behavior with accounts assigned to different roles. A customer should not be able to access the dashboard simply by knowing its URL.

6. Customize the user profile

Once authentication is configured, you can add more information to the user profile. For example:

Add a form to the Account page that lets users update their name, phone number, and profile picture.

Or:

Let users upload a profile picture and save it in the app's storage.

If your product requires specific information, you can describe it in the same way. The agent can update the data model, interface, and logic required to connect that information to the correct account.

7. Add social login

If you want users to sign up or log in through a social provider, you can request it directly in chat. For example:

Add Google login alongside email and password authentication.

Coderblock can integrate social login into the app's authentication flow. After configuring it, test both options:

• sign-up and login with an email address and password;
• login through the social provider.

Also verify that both options lead to the same type of personal area and that data is correctly associated with the user.

8. Manage logout and sessions

An account flow should not stop at login. Ask the agent to configure session behavior as well:

Add a Logout button to the personal area and make sure protected pages are no longer accessible after the user logs out.

Then verify that:

1. logging in opens the personal area correctly;
2. refreshing the page preserves the session when expected;
3. logging out ends the session;
4. protected pages are no longer accessible after logout.

If you want to change this behavior, you can describe the desired flow directly in chat.

9. Test the entire flow

Before publishing the app, test authentication from beginning to end.

User account

1. Create a new account.
2. Log in.
3. Complete the profile, if applicable.
4. Create some personal data.
5. Log out of the account.
6. Log in again.
7. Verify that the data is still there.

Security

Next, create a second account and verify that it:

• cannot view the first user's data;
• cannot modify the first user's data;
• cannot access pages reserved for the first user;
• cannot access admin pages.

Administration

If you configured an administrator role:

1. log in with an administrator account;
2. open the dashboard;
3. verify the available features;
4. switch back to a customer account;
5. try to access the dashboard again.

The goal is not only to confirm that login works, but also to ensure that each user can only do what their role allows them to do.

10. Publish the app

Once you have verified authentication, accounts, roles, and permissions, you can publish the app. Click Publish to deploy it to <app>.coderblock.app, with SSL included.

If you want to use a custom domain, go to Settings → Domains and connect an existing domain by following the guided DNS setup, or purchase one directly through Coderblock.

After publishing, repeat at least the main tests in the production environment:

• sign-up;
• login;
• logout;
• access to protected pages;
• personal data visibility;
• administrator permissions;
• data access across different user accounts.

Final checklist

Before considering authentication complete, verify that:

• sign-up works correctly;
• login and logout work;
• sessions are managed correctly;
• private pages are truly protected;
• each user can only access their own data;
• Row Level Security is configured correctly;
• roles and their permissions work as expected;
• users cannot access admin areas without authorization;
• any social login options work correctly;
• profile data is associated with the correct account.

Authentication is ready

With Coderblock, you can turn a simple app without accounts into a product with sign-up, login, profiles, roles, protected pages, and personal data, using conversation as the primary interface. The most important step, however, is verification: AI can configure much of the infrastructure, but you must confirm that every account and role has exactly the permissions it should have.