@auth0/auth0-react#useAuth0 JavaScript Examples

The following examples show how to use @auth0/auth0-react#useAuth0. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: PrivateRoute.component.js From hiring-system with GNU General Public License v3.0

6 votes

PrivateRouteComponent = ({ children, ...rest }) => {
  const { isAuthenticated } = useAuth0();
  const isUser = isAuthenticated;

  return (
    <Route
      {...rest}
      render={() => {
        return isUser ? children : <Redirect to="/"></Redirect>;
      }}
    ></Route>
  );
}

Example #2

Source File: App.js From React-JS with MIT License

6 votes

function App() {
  const {isLoading} = useAuth0();
  if(isLoading) return <div>Loading...</div>
  
  return (
    <React.Fragment>
      <LoginButton />
      <LogoutButton />
      <Profile />
    </React.Fragment>
  );
}

Example #3

Source File: LoginButton.jsx From React-JS with MIT License

6 votes

LoginButton = () => {
    const {loginWithRedirect,isAuthenticated} = useAuth0();


    return ( 
        !isAuthenticated && (
        <div>
            <button onClick={()=>loginWithRedirect()}>Login</button>
        </div>
     )
    )
}

Example #4

Source File: LogoutButton.jsx From React-JS with MIT License

6 votes

LogoutButton = () => {
  const { logout, isAuthenticated } = useAuth0();

  return (
    isAuthenticated && (
      <React.Fragment>
        <button onClick={() => logout()}>Logout</button>{" "}
      </React.Fragment>
    )
  );
}

Example #5

Source File: Profile.jsx From React-JS with MIT License

6 votes

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

  return (
    <React.Fragment>
      {isAuthenticated && (
        <React.Fragment>
          <h2>User Profile</h2>
          <img src={user.picture} alt={user.name} />
          <JSONPretty data={user} />
        </React.Fragment>
      )}
    </React.Fragment>
  );
}

Example #6

Source File: Layout.jsx From simplQ-frontend with GNU General Public License v3.0

6 votes

function Layout() {
  const { isLoading, isAuthenticated } = useAuth0();
  const dispatch = useDispatch();
  const getUserQueues = useGetUserQueues();

  useEffect(() => {
    // All the backend API calls that should happen at the start goes here.
    // They will the dispached as soon as Auth0 has initilised.
    if (isLoading === false) {
      dispatch(getUserQueues());
    }
  }, [isLoading, isAuthenticated, getUserQueues, dispatch]);

  return (
    <div className={styles['box']}>
      <div className={styles['content']}>
        {/* We load the main app content only after Auth0 has been initilised. 
        This helps ensure that no backend API calls are made before auth the initilisation */}
        <Loading isLoading={isLoading}>
          <Routes />
        </Loading>
      </div>
      <div className={styles['footer']}>
        <Footer />
      </div>
    </div>
  );
}

Example #7

Source File: LoginButton.jsx From simplQ-frontend with GNU General Public License v3.0

6 votes

LoginButton = () => {
  const { user, isAuthenticated, logout, loginWithRedirect } = useAuth0();

  if (isAuthenticated) {
    return (
      <Button
        color="primary"
        onClick={() => logout({ returnTo: window.location.origin })}
        variant="outlined"
      >
        <Avatar id={styles.avatar} alt={user.name} src={user.picture} />
        &nbsp;&nbsp;Logout
      </Button>
    );
  }
  return (
    <Button color="primary" onClick={loginWithRedirect} variant="outlined">
      <Avatar id={styles.avatar} alt="user">
        {' '}
        <AccountCircleIcon />
      </Avatar>
      &nbsp;&nbsp;Login
    </Button>
  );
}

Example #8

Source File: Auth0.jsx From Edlib with GNU General Public License v3.0

6 votes

Auth0 = ({ children }) => {
    const { logoutRedirectUrl } = React.useContext(configContext);
    const { loginWithRedirect, getAccessTokenSilently, logout } = useAuth0();

    return (
        <AuthProvider
            onLogin={() => loginWithRedirect()}
            onLoginCallback={async () => {
                return await getAccessTokenSilently({
                    ignoreCache: true,
                });
            }}
            onLogout={() =>
                logout({
                    returnTo: logoutRedirectUrl,
                })
            }
            onLogoutCallback={async () => {}}
        >
            {children}
        </AuthProvider>
    );
}

Example #9

Source File: loginButton.js From graphql-sample-apps with Apache License 2.0

6 votes

LoginButton = () => {
  const { loginWithRedirect } = useAuth0();
  return (
    <Button
      onClick={() => loginWithRedirect()}
      variant="contained"
      color="secondary"
      className="btn-margin"
      startIcon={<VpnKeyIcon/>}
    >
      Log In
    </Button>
  );
}

Example #10

Source File: logoutButton.js From graphql-sample-apps with Apache License 2.0

6 votes

LogoutButton = () => {
  const { logout } = useAuth0();
  return (
      <Button 
        variant="contained"
        color="secondary"
        startIcon={<ExitToAppIcon/>}
        onClick={() => logout({returnTo: window.location.origin})}
      > 
        Logout 
      </Button>
  );
}

Example #11

Source File: signupButton.js From graphql-sample-apps with Apache License 2.0

6 votes

SignupButton = () => {
  const { loginWithRedirect } = useAuth0();
  return (
    <Button
      onClick={() =>
        loginWithRedirect({
          screen_hint: "signup",
        })
      }
      variant="contained"
      color="secondary"
      className="btn-margin"
    >
      Sign Up
    </Button>
  );
}

Example #12

Source File: index.js From graphql-sample-apps with Apache License 2.0

6 votes

AuthNav = ({ history }) => {
  const { user, isAuthenticated, loginWithRedirect } = useAuth0();
  const location = useLocation();
  const classes = useStyles();
  return (
    <div className={classes.navRight}>
      {location && location.pathname !== '/create' ? (
        <Button
          onClick={() => {isAuthenticated? history.push("/create"): loginWithRedirect()}}
          variant="contained"
          color="secondary"
          className="btn-margin"
          startIcon={<AddIcon />}
        >
          Create
        </Button>
      ) : null}
      &nbsp;
      {isAuthenticated ? (
        <IconButton onClick={() => history.push('/profile')}>
          <Avatar alt={user.name} src={user.picture} />
        </IconButton>
      ) : (
        <span className={classes.login}>
          <LoginButton />
        </span>
      )}
    </div>
  );
}

Example #13

Source File: LogInButton.js From graphql-sample-apps with Apache License 2.0

6 votes

LogInButton = () => {
  const { loginWithRedirect } = useAuth0();

  return (
    <GenericButton
      color="status-ok"
      secondary
      plain={true}
      label="Log in"
      style={{ margin: 10 }}
      onClick={loginWithRedirect}
    />
  );
}

Example #14

Source File: LogOutButton.js From graphql-sample-apps with Apache License 2.0

6 votes

LogOutButton = () => {
  const { logout } = useAuth0();

  return (
    <GenericButton
      color="status-warning"
      plain={true}
      label="Log out"
      style={{ margin: 10 }}
      onClick={() =>
        logout({
          returnTo: window.location.origin,
        })
      }
    />
  );
}

Example #15

Source File: ProtectedRoute.js From TalkTrack with MIT License

6 votes

export default function ProtectedRoute({ children }) {
  const { loading, isAuthenticated } = useAuth0();

  if (loading) return <p>Loading...</p>;
  const isBrowser = typeof window !== 'undefined';

  if (!isAuthenticated && isBrowser) {
    navigate('/');
  }
  return { ...children };
}

Example #16

Source File: navbar.js From TalkTrack with MIT License

6 votes

Navbar = () => {
  const { isAuthenticated, loginWithRedirect, logout } = useAuth0();

  return (
    <header>
      <nav id="navbar">
        <p id="brand">
          <Link to="/">Talk Track</Link>
        </p>
        <div className="nav-items">
          {isAuthenticated && (
            <>
              <Link to="/addTalk" className="nav-item">
                Add Talk
              </Link>
              <button
                className="linkBtn nav-item"
                onClick={() => logout({ returnTo: window.location.origin })}
              >
                Logout
              </button>
            </>
          )}
          {!isAuthenticated && (
            <button
              className="linkBtn nav-item"
              onClick={() =>
                loginWithRedirect({ appState: `${window.location.pathname}` })
              }
            >
              Login
            </button>
          )}
        </div>
      </nav>
    </header>
  );
}

Example #17

Source File: Profile.js From willow-grandstack with Apache License 2.0

6 votes

Profile = () => {
  const { user, isAuthenticated } = useAuth0()

  return (
    isAuthenticated && (
      <Paper style={{ padding: '20px' }}>
        <Avatar src={user.picture} alt={user.name}></Avatar>
        <Typography>{user.name}</Typography>
        <Typography>{user.email}</Typography>
      </Paper>
    )
  )
}

Example #18

Source File: index.js From willow-grandstack with Apache License 2.0

6 votes

AppWithApollo = () => {
  const [accessToken, setAccessToken] = useState()
  const { getAccessTokenSilently, loginWithRedirect } = useAuth0()

  const getAccessToken = useCallback(async () => {
    try {
      const token = await getAccessTokenSilently()
      console.log(token)
      setAccessToken(token)
    } catch (err) {
      //loginWithRedirect()
    }
  }, [getAccessTokenSilently, loginWithRedirect])

  useEffect(() => {
    getAccessToken()
  }, [getAccessToken])

  const client = new ApolloClient({
    uri: process.env.REACT_APP_GRAPHQL_URI || '/graphql',
    request: async (operation) => {
      if (accessToken) {
        operation.setContext({
          headers: {
            Authorization: `Bearer ${accessToken}`,
          },
        })
      }
    },
  })

  return (
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  )
}

Example #19

Source File: useAccount.js From os-league-tools with MIT License

6 votes

// Basic wrapper around useAuth0 with login state caching for now, more will be added with backend user auth changes
export default function useAccount({ redirectReturnToUrl }) {
    const { isLoading, isAuthenticated, loginWithRedirect, logout: logoutWithRedirect } = useAuth0();
    const isLoginCache = useSelector(state => state.account.accountCache.isLoggedIn);
    const dispatch = useDispatch();

    useEffect(() => {
        dispatch(updateAccountCache({ isAuthenticated }));
    }, [isAuthenticated]);

    const isLoggedIn = isLoginCache || isAuthenticated;
    const isAuthenticating = isLoading;

    const login = () => {
        loginWithRedirect({ redirect_uri: redirectReturnToUrl });
    };
    const logout = () => {
        logoutWithRedirect({ returnTo: redirectReturnToUrl });
    };

    return { isLoggedIn, isAuthenticating, login, logout };
}

Example #20