This is Part-2 of Getting Started with Appwrite and creating a Login Page with Appwrite and React! Tutorial.
...
✅ LET'S INTEGRATE APPWRITE
*We'll start by creating a new folder in our src directory, go Ahead create a folder with name Appwrite src/appwrite *
Now create a new file in that folder with name appwrite.auth.js
Now Following are the steps to completely setup the auth file :
1) Import Appwrite
import Appwrite from 'appwrite'
2) Setup SDK and Project :
For this step you'll need your project Id and end point , for that,
🔷Open your Appwrite console on http://localhost/console/
🔷Go to App settings.
🔷There you'll find your project Id and API End Point
Copy those details then put those details in setEndpoint and setProject
const sdk = new Appwrite();
sdk
.setEndpoint('https://[HOSTNAME_OR_IP]/v1') // Your API Endpoint
.setProject('5df5acd0d48c2') // Your project ID
;
3) Creating User :
Now from here we'll be using appwrite's API, for this you can either use axios, fetch statement anything you're comfortable with
We'll directly return the response of the API from the config function.
export const createUser = (email,password,name)=>{
return sdk.account.create(email,password,name);
}
And now we'll make use of this function in our Signup component file . We'll configure our handleChange function to create Account when user hits signup
Navigate to src/components/SignUp.component.jsx
Firstly we'll import createUser function from appwrite.auth.js
import { createUser } from '../appwrite/appwrite.auth';
Then we'll configure handle change and handle Submit function to respond to the event and create the user.
handleSubmit = (event) => {
event.preventDefault();
const email = this.state.email;
const password = this.state.password;
const displayName = this.state.displayName
createUser(email, password, displayName).then(
(res) => console.log(res),
(err) => alert(err.message)
);
};
handleChange = (event) => {
const { value, name } = event.target;
this.setState({ [name]: value });
};
For now, we're not doing much with the response, as soon as we setup loginUser functionality we'll add it here as well so as soon as user register he'll be logged in.
3) Logging User in :
Again, we'll go to our appwrite file to create a function loginUser which has two required parameters : Password and Email
export const loginUser = (email,password)=>{
return sdk.account.createSession(email,password);
}
and we'll create a function to get the current logged in user.
export const getCurrentUser = () =>{
return sdk.account.get();
}
account.get() doesnt have any required parameters.
...
We also need to create a function for Google SignIn :
export const signInWithGoogle = ()=>{
return sdk.account.createOAuth2Session('google');
}
createOAuth2Session takes one paramter : Provider.
Now we'll configure our SignIn page to login user:
Navigate to src/components/SignIn.component.jsx
Firstly, we'll import loginUser and signInWithGoogle function in signUp file :
import { loginUser, signInWithGoogle } from '../appwrite/appwrite.auth';
handleSubmit = (event) => {
event.preventDefault();
const email = this.state.email;
const password = this.state.password;
loginUser(email, password).then(
(res) =>console.log(res),
(err) =>console.log(err)
);
};
handleChange = (event) => {
const { value, name } = event.target;
this.setState({ [name]: value });
console.log(this.state);
};
We also need to configure the googleSignIn button :
<CustomButton onClick={signInWithGoogle} isGoogleSignIn>
{''}
Sign in with google {''}
</CustomButton>
5) Final Configurations :
We've successfully setup the complete authentication, all left for us to do is to configure our App.js file to show user the homepage as soon as user is logged in.
Navigate to src/App.js Here we'll import getCurrentUser function
import { getCurrentUser } from "./appwrite/appwrite.auth";
Now,In our App Component we'll define the state with property of user default to null
state = {
user: null,
};
And we'll also use componentDidMount() lifecycle method to detect if user is logged in or not
componentDidMount() {
getCurrentUser().then((res) => {
this.setState(
{
user: res["$id"],
},
(err) => {
console.log(err);
this.setState({
user: null,
});
}
);
});
}
If we don't get any error, that means we've a valid user so we'll set state to that user's id, otherwise we'll keep the user null.
Now, if user is logged in we must have a homepage to show it to them. So go Let's create a new file and call it homepage.jsx in src directory.
In that file we'll add content with a logout button that we want to show to the user as soon as user logs in.
For logout functionality we'll add a function in our appwrite file,
export const logoutUser = ()=>{
return sdk.account.deleteSession('current');
}
account.deleteSession() takes a default parameter : SessionId but we can also put 'current' to denote the current session.
we'll import this logoutUser function in our App.js and create a new function in our App component to delete the session and logout the user :
DeleteSession = ()=> {
logoutUser().then(
(res) => {
this.setState({ user: null });
console.log(res);
},
(err) => console.log(err)
);
}
Now we'll pass this function as a prop to the Homepage from App.js so the state will force the rerender of the page and bring user to the signin page again.
import React from 'react'
import CustomButton from './Utils/CustomButton'
const Homepage = (props)=>{
return (
<div>
<h1>Welcome Home!!</h1>
<CustomButton onClick={props.logOut}></CustomButton>
</div>
)
}
export default Homepage
Styles for homepage Homepage.styles.scss File
....
Feel free to create and design Homepage file according to yourself.
Now navigate back to App.js there we'll first import our Homepage then Conditionally render Homepage according to our state.
import { getCurrentUser } from "./appwrite/appwrite.auth";
render() {
return (
<div>
{this.state.user === null ? (
<SignInAndSignUpPage></SignInAndSignUpPage>
) : (
<Homepage logOut={this.DeleteSession} />
)}
</div>
);
}
Alright! So we've finally Completed our Login Page. Congratulations you've successfully built your first app with Appwrite!🥳
...
Let's see How our App works :
About Appwrite Community :
I hope you enjoyed this tutorial and you must be excited to use appwrite in your future projects. And If you need any help then join appwrite's community of developers : Discord
Other links and resources :
Github Repo of project
Appwrite Docs
Appwrite Community
Part-1 of Tutorial
Happy Appwriting! ♥
...
Top comments (0)