I’m currently working through the React Authentication By Example: Using React Router 6 guide for my self-hosted site, which is running React v18.2.0, React Router v6.3.0, & React Scripts v5.0.1.
I’m at the “Add Route Guards to React” section & created src/pages/profile-page.js per docs to test things out with the <AuthenticationGuard/> element, prior to rolling out for my production pages. My example.com/profile page redirects to my Auth0 login as expected, for auth.example.com, however after signing in this returns a blank screen & the following error in my browser console:
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: <ProfilePage />. Did you accidentally export a JSX literal instead of a component?
Anyone have any idea what’s going on here?
I have a pastebin for my index.js, App.js, auth0-provider-with-navigate.js, authentication-guard.js, profile-page.js & callback-page.js, yet will share what I have for App.js below.
The main problem is props are not being passed to the <History> component. I’d tried various combinations with the braces, as well as Google search for examples of passing props to components nested with elements, with zero luck.
Since the AuthenticationGuard expects a ComponentType, like ProtectedPage, rather than a React Element, like <ProtectedPage />, you should pass the props for your component to the AuthenticationGuard component as follows in the src/app.js file:
While passing props to a guarded component is not common as they are usually top-level components, we can include an aside in the Developer Guide if you find this solution suitable. Please let us know if this works well for you.
Thank you for helping us make this guide stronger.
The error you’re getting is related to how you’re passing the Login component as the element prop to the <Route> component. With React Router v6, you should use regular elements instead of components (or element types) for rendering. You can read more information about its benefits in the migration guide from React Router v5 to React Router v6.
To fix the issue, do the following in your App component:
Hello! Welcome to the Auth0 Community. Yes, there is! I am working on a sample that may show how to do that. I may not be able to share the full-sample too soon but I can definitely share the code snippets within the next weeks.