Welcome back! In the last lesson, you learned how to build a login form and protect certain routes in your React app. Now, let’s take the next step: allowing new users to create their own accounts. Registration is a key part of most web applications. It lets users sign up, create their own profiles, and access features that require authentication.

By the end of this lesson, you will know how to build a registration flow in your React app. This means you will be able to collect user information, send it to your backend, handle errors, and guide users to the next step after registration.

Before we dive into the registration flow, let’s quickly review how routing is set up in your app. This will help you see where the registration page fits in.

Here is a simplified version of your routing setup:

In this setup, the /register route points to the RegisterPage component. This is where your registration form will live. If you remember from the previous lesson, protected routes (like /shelf) are only accessible to logged-in users.

Let’s look at how the registration form is built. The form is responsible for collecting a username and password from the user.

Here is the main code for the registration form:

Explanation:

• The form uses React’s useState to keep track of the username, password, and any error messages.
• When the form is submitted, it calls handleSubmit.
• If registration is successful, the user is redirected to the login page.

When the user submits the form, the app needs to send the registration data to the backend API. This is done using the apiClient.post method.

Let’s look at the key part of the code again:

Explanation:

• apiClient.post("/auth/register", { username, password }) sends the user’s data to the backend.
• If the backend returns a 409 status, it means the username is already taken. The app shows a helpful error message.
• For any other error, a generic error message is shown.

Example output:
If a user tries to register with a username that already exists, they will see:

If registration is successful, they are redirected to the login page.

After a user successfully registers, you want to guide them to the next step: logging in. This is handled by the navigate("/login") line in the handleSubmit function.

How it works:

• When the registration API call succeeds, the app uses the useNavigate hook from React Router to send the user to the login page.
• This makes the experience smooth and clear for the user.

What the user experiences:

• After submitting the form with valid data, the registration form disappears and the login page appears.

In this lesson, you learned how to build a registration flow in your React app. You saw how to:

• Add a registration route to your app’s router
• Build a registration form that collects user input
• Send registration data to the backend API
• Handle errors and show helpful messages
• Redirect users to the login page after successful registration

You are now ready to practice these steps yourself. In the next exercises, you will get hands-on experience building and testing the registration flow. This will help you understand how registration, login, and protected routes all work together to create a secure and user-friendly app. Good luck!