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.
That worked for my test Profile page, yet doesn’t for components with props (I’d never before seen a component nested within an element under Routes).
I guess now the question is how to transform the below: <Route path='/data' element={<DataPage data1={{var1, var2, var3}} data2={var4} data3={var5}/>} />
To something with props under React Router 6: <Route path='/data' element={<AuthenticationGuard component={DataPage}...
I’d never before seen examples of nesting Route elements with components while properly passing props in React 18 / Router 6, especially with <AuthenticationGuard>.
My question here is how are props passed when changing “element={<History” to “element={History}”?
Thanks, @konrad.sopala, for connecting the dots.
Hi @ymonye, what @bren.codes and @nikyo suggested is correct. We should pass the ProfilePage as follows:
<AuthenticationGuard component={ProfilePage} />
We fixed this in the guide. Thanks for pointing it out.
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.
Hello @ymonye, we found a solution that can help you with the use case of passing props to a component that you need to protect with the <AuthenticationGuard>.
You can update the src/components/authentication-guard.js to the following content:
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.