Authentication
Auth0

How to use Auth0 ?

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

  • Step-1 : Sign up for an account on Auth0 (opens in a new tab). After that, get the client id and domain from the dashboard and put them in the .env file.

  • Step-2 : Open the src/hooks/useAuth.js file. Thereupon, import the AuthContext from src/contexts/auth0Context 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 1

REACT_APP_AUTH0_CLIENT_ID= SET YOUR CLIENT ID
REACT_APP_AUTH0_DOMAIN= SET YOUR DOMAIN

Step 2

import { AuthContext } from "contexts/auth0Context";

const useAuth = () => useContext(AuthContext);
export default useAuth;

Step 3

login.jsx
import useAuth from "hooks/useAuth";

const Login = () => {
const { loginloginWithPopup } = useAuth();

const onLogin = async () => {
await loginWithPopup();
};

return (
<Box>
<Button onClick={onLogin}>Login</Button>
</Box>
);
};

export default Login;
profile.jsx
import useAuth from "hooks/useAuth";

const Profile = () => {
const { user, isAuthenticated, logout } = useAuth();

if (isAuthenticated && user) {
return (
<Box>
<Typography>Email : {user.email}</Typography>
<Button onClick={logout}>logout</Button>
</Box>
);
}

return <Redirect to="/login" />;
};

export default Profile;

How to delete from app ?

  • Delete the auth0Context.jsx file from src/contexts folder
  • You should also delete the AuthContext file from the src/hooks/useAuth.js file if you use this.
  • Also delete the REACT_APP_AUTH0_CLIENT_ID & REACT_APP_AUTH0_DOMAIN from .env file.
  • Uninstall dependecies @auth0/auth0-spa-js (opens in a new tab)

Reference

Last updated on
For NextJSAWS Amplify