MENU


Redirects (Auth)

This example has 3 pages: a public page, a protected page, and a login screen. To see the protected page, you must first login. First, visit the public page. Then, visit the protected page. You're not yet logged in, so you are redirected to the login page. After you login, you are redirected back to the protected page. Notice how the URL changes each time. If you click the back button at this point, you will not go back to the login page, as you're already logged in.


RESETRUNFULL
import React, { useContext, createContext, useState } from "react";import {BrowserRouter as Router, Switch, Route, Link, Redirect, useHistory, useLocation}
    from "react-router-dom";export default function AuthExample() {
  return (
    <ProvideAuth>
      <Router>
        <div>
          <AuthButton />
          <ul>
            <li><Link to="/public">Public Page</Link></li>
            <li><Link to="/protected">Protected Page</Link></li>
          </ul>
          <Switch>
            <Route path="/public"><PublicPage /></Route>
            <Route path="/login"><LoginPage /></Route>
            <PrivateRoute path="/protected"><ProtectedPage /></PrivateRoute>
          </Switch>
        </div>
      </Router>
    </ProvideAuth>
  );}const fakeAuth = {
  isAuthenticated: false,
  signin(cb)
  { fakeAuth.isAuthenticated = true;
  setTimeout(cb, 100); /* fake asyn */ },
  signout(cb) {fakeAuth.isAuthenticated = false; setTimeout(cb, 100);}};const authContext = createContext();function ProvideAuth({ children }) {
  const auth = useProvideAuth();
  return (<authContext.Provider value={auth}>{children}</authContext.Provider>);}function useAuth() {
  return useContext(authContext);}function useProvideAuth() {
  const [user, setUser] = useState(null);
  const signin = cb => {
    return fakeAuth.signin(() => {
      setUser("user");
      cb();
    });
  };
  const signout = cb => {
    return fakeAuth.signout(() => {
      setUser(null);
      cb();
    });
  };
  return {user, signin, signout};}function AuthButton() {
  let history = useHistory();
  let auth = useAuth();
  return auth.user ? (
    <p>Welcome!{" "}
      <button onClick={() => { auth.signout(() => history.push("/")); }}>
        Sign out
      </button>
    </p>
  ) : (<p>You are not logged in.</p>);}function PrivateRoute({ children, ...rest }) {
  let auth = useAuth();
  return (<Route {...rest}
             render={({ location }) =>
                               auth.user ? ( children ) :
                                               (<Redirect
  to={{
                                                      pathname: "/login",
   state: { from: location }}} />)}
    />);}function PublicPage() {return <h3>Public</h3>;}function ProtectedPage() {return <h3>Protected</h3>;}function LoginPage() {
  let history = useHistory();
  let location = useLocation();
  let auth = useAuth();
  let { from } = location.state || { from: { pathname: "/" } };
  let login = () => {
    auth.signin(() => { history.replace(from); });
  };
  return (
    <div>
      <p>You must log in to view the page at {from.pathname}</p>
      <button onClick={login}>Log in</button>
    </div>
  );}