I am using token-based authentication and wonder how to fully tie it together in Relay Modern. I am halfway through. Any help is much appreciated. This is the setup I have:
<App />
I render the <QueryRenderer />
entry point.<LoginPage />
component I have a form that triggers LoginUserMutation on submit. When I provide a valid username and password combination I receive back a token:
localStorage.setItem('token', token)
/dashboard
route via history.push('/dashboard')
createRelayEnvironment.js
's fetchQuery I define how to make a network request to the GraphQL backend:
const token = localStorage.getItem('token');
{ ..., 'authorization': 'Bearer ${token}' }
. The backend is then able to authenticate the user.Soooo goood so far. Unfortunately, there is one issue that is spoiling the picture. This setup works great when the app initializes after the token has already been stored into localStorage. Not so though, if you are currently unauthenticated without a token entry in the localStorage.
As mentioned before, imagine you are inside the LoginUserMutation, the mutation has been successful and you get a valid token back in the onComplete
callback. Now what to do with it? Yes I store it inside the localStorage
. But if I redirect the user to the <Dashboard />
component I am screwed. Why? - the dashboard component needs restricted data. When the app first initializes though the restricted data is not provided as no token is being sent to the GraphQL endpoint. Then later when the token is eventually available in the LoginUserMutation Relay does not actually do anything with it.
tl;dr
Q1
How can I - equipped with a valid token - trigger a refetch of data required by the <Dashboard />
component, before I send the user to /dashboard
.
Q2
Is there a better way to handle authentication w/ Relay when using JSON Web Token (JWT)? In particular, what to do from the point where you receive a valid token inside the onComplete
callback of LoginUserMutation?
When authentifying your user, re-creates the Relay environment. You will drop any existing cache. This is what is recommended as anyways your cache should be different depending on which user is logged in, so dropping it entirely is OK.
Pseudo-code:
class App extends PureComponent {
state = {
environment: createRelayEnvironment(),
};
login = () => {
doLoginMutation({
onSuccess: () => this.setState({ environment: createRelayEnvironment() }),
})
}
...
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With