How to add Authentication to your React app using Appwrite

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:

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:

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:

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

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,createEmailPasswordSessiondeleteSession, get etc. to handle user authentication and authorization.

Signup

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

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

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

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
Happy coding! 🚀.