How to Add Authentication to React Applications | Hygraph
Tue Apr 18 2023 19:49:05 GMT+0000 (Coordinated Universal Time)
Saved by
@preston
#javascript
import React from 'react';
import axios from 'axios';
import { useState } from 'react';
import { API_ROUTES, APP_ROUTES } from '../utils/constants';
import { Link, useNavigate } from 'react-router-dom';
import { useUser } from '../lib/customHooks';
import { storeTokenInLocalStorage } from '../lib/common';
const SignIn = () => {
const navigate = useNavigate();
const { user, authenticated } = useUser();
if (user || authenticated) {
navigate(APP_ROUTES.DASHBOARD)
}
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [isLoading, setIsLoading] = useState(false);
const signIn = async () => {
try {
setIsLoading(true);
const response = await axios({
method: 'post',
url: API_ROUTES.SIGN_IN,
data: {
email,
password
}
});
if (!response?.data?.token) {
console.log('Something went wrong during signing in: ', response);
return;
}
storeTokenInLocalStorage(response.data.token);
navigate(APP_ROUTES.DASHBOARD)
}
catch (err) {
console.log('Some error occured during signing in: ', err);
}
finally {
setIsLoading(false);
}
};
return (
// SIGN IN FORM TEMPLATE
);
}
export default SignIn;
content_copyCOPY
https://hygraph.com/blog/react-authentication
Comments