Authentication has no effect on protected pages as per example

Help
1

I am using an example from the Docs of auth0-react v1.2.0 in my React web-app in which I have a Home page which is supposed to be viewable by all without authentication, and 4 protected pages which must be accessible only after a user has authenticated.

My redirects to and from Auth0 work fine, but when a user logs out, the protected pages remain accessible as if the user were still authenticated. Can this happen because my App is split into pages? Any advice would be greatly appreciated.

Link to CodeSandbox: https://dz0e8.csb.app/

3

Hi @dnorrstrand,

Welcome to the Community!

I took a look at your CodeSandbox, and it looks like I can go to all of the nav links without ever logging in.

In your nav component, you can conditionally render links like this:

import { useAuth0 } from "@auth0/auth0-react";

const NavBar = () => {
  const {
    isAuthenticated,
  } = useAuth0();

  return (
              {isAuthenticated && (
                <NavItem>
                  <NavLink
                    tag={RouterNavLink}
                    to="/external-api"
                    exact
                    activeClassName="router-link-exact-active"
                  >
                    External API
                  </NavLink>
                </NavItem>
              )}
  )}

You can also prevent a component from rendering by using withAuthenticationRequired when it is exported.

Example:

import React from "react";
import { Container, Row, Col } from "reactstrap";

import Highlight from "../components/Highlight";
import Loading from "../components/Loading";
import { useAuth0, withAuthenticationRequired } from "@auth0/auth0-react";

export const ProfileComponent = () => {
  const { user } = useAuth0();

  return (
    <Container className="mb-5">
      <Row className="align-items-center profile-header mb-5 text-center text-md-left">
        <Col md={2}>
          <img
            src={user.picture}
            alt="Profile"
            className="rounded-circle img-fluid profile-picture mb-3 mb-md-0"
          />
        </Col>
        <Col md>
          <h2>{user.name}</h2>
          <p className="lead text-muted">{user.email}</p>
        </Col>
      </Row>
      <Row>
        <Highlight>{JSON.stringify(user, null, 2)}</Highlight>
      </Row>
    </Container>
  );
};

export default withAuthenticationRequired(ProfileComponent, {
  onRedirecting: () => <Loading />,
});
4

Hi Stephanie

I am trying to implement your second solution but am getting a nice cloud picture in my code sandbox:

image

I have only used your code in my Comp1 so far. What have I done wrong? Thanks.

5

Hi @dnorrstrand,

Could you share the code for your component? Thanks!

7

The “Link 1” page is working! You’ll see an error if you try to load the Universal Login page from within the iframe because of browser security issues. If you open the app on a new page, it will work.

It looks like you also need to update the import of the Spinner component from:

import Spinner  from "react-bootstrap/Spinner";

to

import { Spinner } from "react-bootstrap";
9

Link 1 is NOT working. The way it is supposed to work is re-direct the user to the Universal login page. Instead, the redirect re-displays the Home page.

Is this a bug? I have checked my code multiple times against the Docs. All seems to be identical. But it is NOT working for my App. Can you please assist to find the error in the code?

Thanks