Skip to content

Instantly share code, notes, and snippets.

@onedebos
Last active Nov 20, 2022
Embed
What would you like to do?
import React, { useState, useEffect } from "react";
import axios from "axios";
const App = () => {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [user, setUser] = useState();
useEffect(() => {
const loggedInUser = localStorage.getItem("user");
if (loggedInUser) {
const foundUser = JSON.parse(loggedInUser);
setUser(foundUser);
}
}, []);
// logout the user
const handleLogout = () => {
setUser({});
setUsername("");
setPassword("");
localStorage.clear();
};
// login the user
const handleSubmit = async e => {
e.preventDefault();
const user = { username, password };
// send the username and password to the server
const response = await axios.post(
"http://blogservice.herokuapp.com/api/login",
user
);
// set the state of the user
setUser(response.data);
// store the user in localStorage
localStorage.setItem("user", JSON.stringify(response.data));
};
// if there's a user show the message below
if (user) {
return (
<div>
{user.name} is loggged in
<button onClick={handleLogout}>logout</button>
</div>
);
}
// if there's no user, show the login form
return (
<div>
<form onSubmit={handleSubmit}>
<label htmlFor="username">Username: </label>
<input
type="text"
value={username}
placeholder="enter a username"
onChange={({ target }) => setUsername(target.value)}
/>
<div>
<label htmlFor="password">password: </label>
<input
type="password"
value={password}
placeholder="enter a password"
onChange={({ target }) => setPassword(target.value)}
/>
</div>
<button type="submit">Login</button>
</form>
</div>
);
};
export default App;
@Deadpixel62
Copy link

Deadpixel62 commented Mar 22, 2022

perfectly put, thank you !

@Web0143
Copy link

Web0143 commented May 26, 2022

also give code of backend

@fatemehkarimi
Copy link

fatemehkarimi commented Aug 30, 2022

I searched the whole internet but ain't gain a thing! this is really precious. thank you.

@johnboncalos
Copy link

johnboncalos commented Sep 14, 2022

You need to secure this as the browser is open to anything. Implement another check on the server if the token is still legit and clear localstorage on logout.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment