How to pass props from routes to page

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