How to pass props from routes to page

Get Help and Help Others
1

Hey, I am creating to create a custom authentication and I have completed but I am unable to pass the props from custom auth wrapper to page. but I can access props from routes page through cloneing the element and adding a new props. if someone can help that could be great. Thanks in Advance

2

Hey @techwizard128, Can you share some code snippets so that we can identify your problem properly.

Have you created a AuthProvider and passing the component using children or using some hooks?

3

Hey @aggmoulik, I have created CustomAuth using JWT. I have refered using this Custom github JWT Auth with Redwood Auth

and Here is code Snippet for

const App = () => (
  <FatalErrorBoundary page={FatalErrorPage}>
    <CustomAuth type="jwt">
      <RedwoodApolloProvider>
        <Routes />
      </RedwoodApolloProvider>
    </CustomAuth>
  </FatalErrorBoundary>
)

export default App

and routes here

const Routes = (props) => {
  return (
    <Router>
      <Route path="/dashboard/{page}?" page={DashboardPage} userData={props.userData} name="dashboard" />
    </Router>
  )
}

If I log the props inside routes its working but I dont know to pass this props to pages also. which why I opened this thread

4

Hi @techwizard128 and thanks for provide some of the code samples that @aggmoulik suggested – that always helps!

Just to let you know, the example Custom github JWT Auth with Redwood Auth is from May 2020 and is likely out of date. Also, originally I think @danny was using this for a CLI-bsed auth scheme, not in the UI (but I may be mistaken).

Could you explain what type of authentication you are tying to implement – and why one of the current auth providers does not meet needs (we do know that some of the providers like Netlify are not allowed to be used in certain countries, for example or there is an added cost for some others)?

You should know that there is an upcoming RedwoodJS Database Authentication feature coming up in (likely) the next release: https://github.com/redwoodjs/redwood/pull/2701

This will let you store users and passwords (configureable) in your own database and authenticate securely given the same auth patterns in the current Rw auth providers.

If this type of auth is what you are looking for, I highly suggest waiting for the next release as there’s many considerations when implementing an authentication provider and @rob has done all that work for everyone who needs db auth (one of the most oft requested RW features!).

But, if your question is just about pages and props, I suggest looking at the useParams hook

https://redwoodjs.com/docs/redwood-router.html#useparams

Sometimes it’s convenient to receive route parameters as the props to the Page, but in the case where a deeply nested component needs access to the route parameters, it quickly becomes tedious to pass those props through every intervening component. RR solves this with the useParams hook:

import { useParams } from '@redwoodjs/router'

const SomeDeeplyNestedComponent = () => {
  const { id } = useParams()
  ...
}

or perhaps the useLocation hook

https://redwoodjs.com/docs/redwood-router.html#uselocation

which is part of the Redwood router.

Hope that helps.

1 Like
5

I guess dbAuth should work for me. Let me give a try. Thank you so much

1 Like