Authentication using Appwrite in React - Part 1

An important function of a backend service is to authenticate users.

Appwrite is a Backend as a Service in my understanding. It makes it easy for us developers to focus on the main aspects of the Application, while it leverages the Machine provided to store data, manage users and provide various functionalities, including authentication.

Note : I am using my local machine for the process

Step 1 : Adding Appwrite to your project

To use Appwrite, you need to have Docker installed on your machine.
Once you have, you can open your terminal and locate your project.
Now you have to install Appwrite for your project. Since it packaged in Docker containers, it is relatively simple to use. You can just run the following command based on where you are running :

CMD 

    docker run -it --rm ^
    --volume //var/run/docker.sock:/var/run/docker.sock ^
    --volume "%cd%"/appwrite:/usr/src/code/appwrite:rw ^
    --entrypoint="install" ^
    appwrite/appwrite:0.13.4
Enter fullscreen mode Exit fullscreen mode

PowerShell (the one that VSCode uses) 

    docker run -it --rm ,
    --volume /var/run/docker.sock:/var/run/docker.sock ,
    --volume ${pwd}/appwrite:/usr/src/code/appwrite:rw ,
    --entrypoint="install" ,
    appwrite/appwrite:0.13.4
Enter fullscreen mode Exit fullscreen mode

You are now ready to use Appwrite on your machine.

Step 2 : Logging into Appwrite and initial Steps

Once you have installed Appwrite, head over to http://localhost/.
Login or create a new account to view the Appwrite console.

Appwrite Console

You will be prompted to create a project when you log in.

Add Platform

Next you will need to add a platform to perform actions like create Users, add files and store data. So, click on add platform and select the New Web App option.

App type

Next add a name for your platform and a domain(for local setup, use localhost).

New Platform

And you have created a new Backend service ready for use!

Step 3 : Install Dependencies

Next we will have to use Appwrite in our project.
Obviously, the first step for this would be install appwrite as a dependency.

npm install appwrite
Enter fullscreen mode Exit fullscreen mode

To connect with the project, we will need the projectId and the apiEndpoint. It's simple here. Just go to the appwrite console and head over to the settings page of your current project. It looks something like this :

Settings Page

Create a .env file in the root folder of your project and add the following :

REACT_APP_APPWRITE_PROJECT=YOUR_PROJECT_ID
REACT_APP_APPWRITE_ENDPOINT=YOUR_APPWRITE_ENDPOINT
Enter fullscreen mode Exit fullscreen mode

Replace the PROJECT_ID and YOUR_APPWRITE_ENDPOINT with your actual projectId and endpoint found in the settings page above.

Now you are all set to implement Authentication, which I will discuss in the second part of this post. Stay Tuned!!