Traveler Registration 📝

As we ascend further up the island, it seems we're getting closer to an old building; that must be where we need to go. But before that, let's find out how to get registered in the list of travelers who have embarked on this adventure! 🌴 In this section, we will explore the registration process, step by step! Traveler registration is the first essential step of our journey. With Appwrite, this task is simplified thanks to the Account service, which handles the entire process. 🏝️

Registering a Traveler 🧳 ​

💟 Info Bonus : Registration in the Console 📝

Appwrite provides a user interface directly in the console to manage users. You can access this Authentication section from the left menu. From this page, you can view the list of registered users, manage their information, or even create new users 🏝️

But we are much more interested in the Appwrite API for managing users. That's why we're going to dive directly into the code! 🧑🏼‍💻

In our case, we'll use the Appwrite SDK to register a traveler. From the AppVenture application, you can see that by going to the registration page /register, the form to collect traveler information is already created! 🥳 Unfortunately for us, it seems to have been damaged, and some code snippets for communicating with Appwrite are missing... You'll need to fix all that! 🧑‍🔧

Step 1️⃣: Initialize the Account Service ​

Before you can use the Account service, you need to initialize it with your Appwrite client. To do this, you should import the Account service and create a new instance of it, passing your Appwrite client as a parameter. You can initialize the Account service in the src/workshop/api/config/client.config.ts file.

export const account = new Account(AppwriteClient);

export const account = new Account(AppwriteClient);

Step 2️⃣: Write the Registration Function ​

• Now that the Account service is initialized, we can complete the register function, which you can find in the src/workshop/api/modules/account/account.ts file. This function takes the traveler's name, email, and password as parameters and uses the Appwrite API to perform the registration.

import {UserType} from '@/types/UserHook.type';
import {AppwriteException, ID} from 'appwrite'; 
import {account} from '@/workshop/api/config/client.config'; 

export async function register(
  email: string,
  password: string,
  name: string,
  login: (email: string, password: string) => Promise<void>
): Promise<UserType> {
  try {
    return await account.create(ID.unique(), email, password, name); 
  } catch (error: any) {
    throw new AppwriteException(error);
  }
}

import {UserType} from '@/types/UserHook.type';
import {AppwriteException, ID} from 'appwrite'; 
import {account} from '@/workshop/api/config/client.config'; 

export async function register(
  email: string,
  password: string,
  name: string,
  login: (email: string, password: string) => Promise<void>
): Promise<UserType> {
  try {
    return await account.create(ID.unique(), email, password, name); 
  } catch (error: any) {
    throw new AppwriteException(error);
  }
}

• Once we have retrieved the traveler's session, it is necessary to authenticate them with their credentials because the login is not automatic after registration. For this, we need to use the login function, which you can find in the src/workshop/api/modules/account/account.ts file... Unfortunately, this function is not written yet! 🤔 We'll come back to this part later!

Step 3️⃣: Sign Up! ​

Now that the register function is written, you should be able to create your traveler's account! 🥳 The rest of the code is already written; you just need to go to the registration page /register and fill out the form!

Step 4️⃣: Verify Your Account ​

After filling out the form, you should be redirected to the login page /login. You should also see your user appear in the list of users in the Appwrite console! 📝 If you see it, then everything has gone well, and you'll be able to complete the login page in the next step! 🥳