QuickFrame - Client & Admin Dashboard Documentation

How to use Amplify ?

Note: The quickframe template uses the firebase authentication system by default.

Step-1 : Create an AWS account first if you don't already have one. After that, follow this documentation: https://docs.amplify.aws/lib/project-setup/prereq/q/platform/js/#configure-the-amplify-cli (opens in a new tab)
Step-2 : After completing amplify setup, Open the src/hooks/useAuth.js file. Thereupon, import the AuthContext from src/contexts/amplifyContext then pass it as an argument in the useContext hook.
Step-3 : Call the useAuth hook inside AuthGuard, GuestGuard components, Login, Register page etc.

Step 2


_10import { AuthContext } from "contexts/amplifyContext";
_10
_10const useAuth = () => useContext(AuthContext);
_10export default useAuth;

Step 3


_17import useAuth from "hooks/useAuth";
_17
_17const Login = () => {
_17  const { login } = useAuth();
_17
_17  const onLogin = async () => {
_17    await login("example@email.com", "pass123"); // Login crediential
_17  };
_17
_17  return (
_17    <Box>
_17      <Button onClick={onLogin}>Login</Button>
_17    </Box>
_17  );
_17};
_17
_17export default Login;

profile.jsx


_18import useAuth from "hooks/useAuth";
_18
_18const Profile = () => {
_18  const { user, isAuthenticated, logout } = useAuth();
_18
_18  if (isAuthenticated && user) {
_18    return (
_18      <Box>
_18        <Typography>Email : {user.email}</Typography>
_18        <Button onClick={logout}>logout</Button>
_18      </Box>
_18    );
_18  }
_18
_18  return <Redirect to="/login" />;
_18};
_18
_18export default Profile;

How to delete from app ?

Delete the amplifyContext.jsx file from src/contexts folder
If you use this, you should also remove the AuthContext file from the src/hooks/useAuth.js file.
Remove the aws-exports.js file & amplify folder from the app root folder as well.
Remove the dependency aws-amplify

Reference

Auth0 For React