Authentication using Appwrite in React - Part 1
Tags: webdev, appwritehack, react, tutorial
Published: 2022-05-05 18:30:56

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`
```bash
    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
```

## `PowerShell` (the one that VSCode uses)
```bash
    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
```

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/](http://localhost/).
Login or create a new account to view the Appwrite console.

![Appwrite Console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7de632wsoq48yge9ssnk.png)

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

<h4>Add Platform</h4>
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jyemqtjr8qfm78iz21qb.png)

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

![New Platform](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r4riz7qjv5hkyt52gwrg.png)

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.
```bash
npm install appwrite
```
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ndltfrepywu05wultibq.png)

Create a `.env` file in the root folder of your project and add the following : 
```javascript
REACT_APP_APPWRITE_PROJECT=YOUR_PROJECT_ID
REACT_APP_APPWRITE_ENDPOINT=YOUR_APPWRITE_ENDPOINT
```
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!!