How to add Authentication to your React app using Appwrite
Tags: webdev, react, baas, frontend
Published: 2024-05-01 20:15:27

Hey developers, let's dive into the world of authentication with React and Appwrite.Are you looking for a seamless way to implement authentication in your  react applications. Look no further, because React and Appwrite make it easy!

### What is Appwrite 
First, let's talk about what Appwrite is. Appwrite is an open source platform that provides back-end services for your websites or mobile applications. Think of it as an all-in-one tool for user authentication, database management, file storage and more. Plus, it's very easy to integrate with React!

### How to get started 
Well, buckle up because we're going to set up authentication in our React app using Appwrite.
### Step 1: Configure your React app
If you haven't already done so, fire up a terminal and create a new React app. using Create React App. It's as easy as running:
```bash
npx create-react-app  my-app
```
###Step 2: Install the Appwrite SDK
Install the Appwrite JavaScript SDK. This SDK allows our React application to communicate with Appwrite's backend services. Run the following command in terminal:
```bash
npm install appwrite
```
### Step3: Start Appwrite 
Now let's instantiate Appwrite in our React application. Create a new file called `appwrite.js` in your 'src' directory and add the following code:
```javascript
import { Client, Account } from 'appwrite';
const client = new Client()
client.setEndpoint('YOUR_APPWRITE_ENDPOINT').setProject(YOUR_APPWRITE_PROJECT_ID)
export const account=new Account (client)
```
Remember to replace "YOUR_APPWRITE_ENDPOINT" and "YOUR_APPWRITE_PROJECTID" with your actual Appwrite endpoint and project ID, which you can find on the [Appwrite dashboard](https://cloud.appwrite.io/)

### Step4: Enable Authentication 
Now for the fun part - enable authentication! In React components where you want to handle authentication, you can use Appwrite SDK methods like `create`,`createEmailPasswordSession``deleteSession`, `get` etc. to handle user authentication and authorization.
#### Signup
```javascript
import {account} from './appwrite'
import {ID} from "appwrite"

//Function to handle signup

const handleSignup=async(username,email, password)=>{
try{
const data=await account.create(ID.unique(),email, password,username)
console.log('successfully signed up')
//You can perform a redirect to the login
}catch(err){
console.error(err)
}
``` 
#### login
```javascript
import {account} from './appwrite'
import {ID} from "appwrite"

//Function to handle login

const handleLogin=async(email, password)=>{
try{
const data=await account.createEmailPasswordSession(email, password)
console.log('successfully login')
//You can perform a redirect to the main
}catch(err){
console.error(err)
}
``` 
#### logout
```javascript
import {account} from './appwrite'
import {ID} from "appwrite"

//Function to handle signup

const handlelogout=async()=>{
try{
const data=await account.deleteSession('current')
console.log('successfully logged out')
//The delete session deleted the user current session 
}catch(err){
console.error(err)
}
}
```
#### Get user session
```javascript
import {account} from './appwrite'
import {ID} from "appwrite"

//Function to handle signup

const getSession=async()=>{
 try{
const data=await account.get()
console.log(data)

}catch(err){
console.error(err)
}
}
```
And that's it! In just a few lines of code, you'll have authentication set up in your React application using Appwrite. Pretty cool, huh?
So whether you're building a small personal project or a large-scale application, Appwrite got you covered . 
You can find out more from their [official documentation ](https://appwrite.io/docs)
Happy coding! 🚀.