Add 5 login methods to your Hasura app in 5 minutes with OneGraph’s AuthGuardian
Tags: authentication, authorization
Published: 2020-07-09 05:05:16

---
title: Add 5 login methods to your Hasura app in 5 minutes with OneGraph’s AuthGuardian
published: true
date: 2020-07-01 09:01:49 UTC
tags: authentication, authorization
canonical_url: https://hasura.io/blog/add-5-login-methods-to-your-hasura-app-in-5-minutes-with-onegraphs-authguardian/
---

> AuthGuardian by OneGraph is live on Product Hunt today, check it out [here](https://www.producthunt.com/posts/authguardian-by-onegraph)!

[AuthGuardian](https://www.onegraph.com/docs/auth_guardian.html) is a free service by [OneGraph](https://www.onegraph.com/) 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](https://www.onegraph.com/auth-guardian/) (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:

![](https://www.dropbox.com/s/l8jwfdwllv2l8n1/Screenshot%202020-05-18%2011.19.18.png?raw=1)

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`  
> ![](https://paper-attachments.dropbox.com/s_AC063DFFF7EDC547822B5E8C5C4999C4965E6BFD50A303A5A4AC3AF291460E98_1589828928206_stripe_login.gif)

**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:

![](https://paper-attachments.dropbox.com/s_AC063DFFF7EDC547822B5E8C5C4999C4965E6BFD50A303A5A4AC3AF291460E98_1589829202413_stripe_login_example.gif)

💥_BOOOOOOOOOOOOOOMMMMM_🤯  
✅Stripe login: Done!

# Step 2: All the others!

Let’s do the same for GitHub:

![](https://paper-attachments.dropbox.com/s_AC063DFFF7EDC547822B5E8C5C4999C4965E6BFD50A303A5A4AC3AF291460E98_1589829317244_github_login.gif)

And Twitter:

![](https://paper-attachments.dropbox.com/s_AC063DFFF7EDC547822B5E8C5C4999C4965E6BFD50A303A5A4AC3AF291460E98_1589829354710_twitter_login.gif)

And Salesforce:

![](https://paper-attachments.dropbox.com/s_AC063DFFF7EDC547822B5E8C5C4999C4965E6BFD50A303A5A4AC3AF291460E98_1589829330911_salesforce_login.gif)

….Twitch…

![](https://paper-attachments.dropbox.com/s_AC063DFFF7EDC547822B5E8C5C4999C4965E6BFD50A303A5A4AC3AF291460E98_1589829381587_twitch_login.gif)

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

![](https://paper-attachments.dropbox.com/s_AC063DFFF7EDC547822B5E8C5C4999C4965E6BFD50A303A5A4AC3AF291460E98_1589829408063_spotify_login.gif)

# 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](https://github.com/hasura/graphql-engine/issues/3576) [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](https://github.com/hasura/graphql-engine) on GitHub:

![](https://paper-attachments.dropbox.com/s_AC063DFFF7EDC547822B5E8C5C4999C4965E6BFD50A303A5A4AC3AF291460E98_1589829625236_github_is_fan_true.gif)

# 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  
> ![](https://paper-attachments.dropbox.com/s_AC063DFFF7EDC547822B5E8C5C4999C4965E6BFD50A303A5A4AC3AF291460E98_1589829772304_github_auth.gif)

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`  
> ![](https://paper-attachments.dropbox.com/s_AC063DFFF7EDC547822B5E8C5C4999C4965E6BFD50A303A5A4AC3AF291460E98_1589829856966_stripe_auth_1.gif)

# 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?

![](https://paper-attachments.dropbox.com/s_AC063DFFF7EDC547822B5E8C5C4999C4965E6BFD50A303A5A4AC3AF291460E98_1589829911151_login_all_the_things.gif)

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.

![](https://paper-attachments.dropbox.com/s_AC063DFFF7EDC547822B5E8C5C4999C4965E6BFD50A303A5A4AC3AF291460E98_1589830202381_image.png)

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!

![](https://paper-attachments.dropbox.com/s_AC063DFFF7EDC547822B5E8C5C4999C4965E6BFD50A303A5A4AC3AF291460E98_1589831169191_auth_guardian_hasura_starterkit_netlify.gif)

# 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](https://hasura.io/docs/1.0/graphql/manual/remote-schemas/index.html) feature: Bring in [OneGraph](https://onegraph.com/) 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](https://hasura.io/blog/remote-joins-a-graphql-api-to-join-database-and-other-data-sources/) 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](https://www.onegraph.com/auth-guardian/) - we’d love to hear what you think!

**About the author**

This blog post was written by [Sean Grove](http://twitter.com/sgrove?lang=en) - Founder of onegraph.com, under the Hasura Technical Writer Program.

<!--kg-card-end: markdown-->