Add 5 login methods to your Hasura app in 5 minutes with OneGraph’s AuthGuardian

AuthGuardian by OneGraph is live on Product Hunt today, check it out here!

AuthGuardian is a free service by OneGraph that recently hit public release, and it’ll let you both:

1. Add sign-on with dozens of services like GitHub, Twitch, Stripe, Salesforce, and more
2. Easily, visually describe authentication and authorization rules for your app, API, or service.

The best part? It speaks native Hasura authorization out of the box!

That means you can set a user’s X-Hasura-User-Id to their Spotify userId, add an admin default role if they’re part of your Stripe organization, set a session variable of discount: 0.10 if they’ve contributed to your open-source project on GitHub to use in your custom Hasura functions

So let’s see how once you’re in the groove with AuthGuardian, you can do all of this in ~5 minutes:

1. Add login with 5 different services, including:
   • Stripe
   • GitHub
   • Twitter
   • Salesforce
   • Twitch
2. Set a user as admin if they’re part of your GitHub org or your Stripe org
3. Set a session variable with a 10% discount for a user if they’ve starred the Hasura graphql-engine repository on GitHub
4. Deploy a AuthGuardian React starterkit to Netlify for testing
5. Use Hasura’s remote schemas to query into the service API
6. Configure Hasura to accept AuthGuardian JWTs

Step 1: Add login with 5 services!

Let’s start with configuring AuthGuardian to allow Hasura sign-in for five different services!

First, sign up for AuthGuardian (fun fact, the AuthGuardian sign up is powered by AuthGuardian!) with your GitHub or Netlify account, or just plain ol’ email.

That’ll take you straight to the AuthGuardian settings panel:

Here you can configure a series of rules: Each rule has conditions (“If this user is logged into GitHub and has starred my repository”), and if the condition is true , then there are also effects that run to create your final JWT (“Then set the Hasura user id to their GitHub userId and create a session variable of is-fan=true").

Login 1: Stripe!

For our first rule, we’ll build:

If this user is logged in to Stripe, then set their Hasura user-id to their Stripe accountId

Stripe login - test it out!

Next we’ll log into Stripe and use our JWT preview to make sure the result looks like what we expect:

💥BOOOOOOOOOOOOOOMMMMM🤯

✅Stripe login: Done!

Step 2: All the others!

Let’s do the same for GitHub:

And Twitter:

And Salesforce:

….Twitch…

And why not throw in Spotify login as a bonus while we’re at it?

Step 3: Set Hasura session variables

But we can take it further! Hasura lets you set session variables for use in authorization permissions, and in custom Postgres functions [TODO: FIX THIS LINK]!

Let’s set a session variable of is-fan to true if (and only if!) they’ve starred the Hasura GraphQL Engine repository on GitHub:

Step 4: Setting Hasura auth roles

In our application we want admins to be anyone who’s a member of our Stripe or GitHub org - easily done!

When this user on GitHub is a member of an org called “Hasura”, then add admin to their list of allowed Hasura roles

And if they’re a member of our Stripe org, then we’ll make them use the admin role by default:

When this user on Stripe has an account id (organization id) equal to <my-stripe-account-id>, then set their default Hasura role to admin

Step 5: Log in ALL THE SERVICES!

What happens in our JWT preview if we log into all of the services we just set up?

Our JWT has our custom Hasura claims set up exactly as we expect - success!

Final step: Configure Hasura and AuthGuardian for great harmony

The last step is configuring Hasura to accept JWTs signed by OneGraph’s AuthGuardian - no worries, you’re covered there as well! AuthGuardian has a config generator under Auth Services => Settings that will give you a copy/paste line for updating the JWT auth settings for Hasura on Heroku or standalone.

As an advanced option, you can also change the JWT generation method here in case you’d like to use shared-secret instead of public-key signatures.

Bonus: Deploy a live React app with your logins preconfigured

Under the Install tab, you can click on the React starterkit to deploy a pre-configured app live to either Netlify or Vercel in just a few seconds!

The future: Remote schemas, joins, tigers and bears, oh my!

The JSON web tokens generated by AuthGuardian are also compatible with Hasura’s excellent remote-schemas feature: Bring in OneGraph as a remote schema, have your users log in with AuthGuardian, and immediate query into Salesforce, Stripe, GitHub, and more.

And AuthGuardian tokens are perfectly forward compatible with planned Hasura features like the mind-blowing remote-joins as well, so you can build your apps today knowing that you’re set up to take advantage of Hasura’s incredible development pace.

Try it on your own Hasura project!

You can try AuthGuardian with your own Hasura project by signing up on the AuthGuardian Landing Page - we’d love to hear what you think!

About the author

This blog post was written by Sean Grove - Founder of onegraph.com, under the Hasura Technical Writer Program.