Sign up for Hasura Newsletter

Tying it to together

The only thing left is to understand is how does authentication work? We need to do three things with respect to authentication:

  1. Pass the JWT token from Auth0 to Hasura while firing the pull & push query
  2. Pass the JWT token from Auth0 to Hasura while setting up the GraphQL subscription
  3. Restart the replication process whenever the JWT token changes. Eg: if the user logs out and logs back in

In the previous section we have seen that #2 is taken care of by passing the Authorization header in the connectionParams.

Similarly, #1 is taken care of while initializing RxDB:

async setupGraphQLReplication(auth) {
const replicationState = this.db.todos.syncGraphQL({
url: syncURL,
headers: {
'Authorization': `Bearer ${auth.idToken}`
},
push: {
batchSize,
queryBuilder: pushQueryBuilder
},
pull: {
queryBuilder: pullQueryBuilder(auth.userId)
},
live: true,
/**
* Because the websocket is used to inform the client
* when something has changed,
* we can set the liveIntervall to a high value
*/
liveInterval: 1000 * 60 * 10, // 10 minutes
deletedFlag: 'deleted'
});
replicationState.error$.subscribe(err => {
console.error('replication error:');
console.dir(err);
});
return replicationState;
}

Finally for #3 we add a restart method in the GraphQLReplicator class:

async restart(auth) {
if(this.replicationState) {
this.replicationState.cancel()
}
if(this.subscriptionClient) {
this.subscriptionClient.close()
}
this.replicationState = await this.setupGraphQLReplication(auth)
this.subscriptionClient = this.setupGraphQLSubscription(auth, this.replicationState)
}

This method is called by the AppWrapper class whenever there is a change the authentication token.

Did you find this page helpful?
Start with GraphQL on Hasura for Free
  • ArrowBuild apps and APIs 10x faster
  • ArrowBuilt-in authorization and caching
  • Arrow8x more performant than hand-rolled APIs
Promo
footer illustration
Brand logo
© 2021 Hasura Inc. All rights reserved
Github
Titter
Discord
Facebook
Instagram
Youtube
Linkedin