Part XII: Using the Auth UI Kit

../../../_images/uikit-dark1.png
../../../_images/uikit-light1.png

In the previous section, we deployed our own custom app. If you want to add authentication to your app and do not want to write auth code, you can use the Auth UI kit which is a ready to use frontend interface that comes pre-loaded with the Hasura auth microservice.

The UI kit runs on this url: auth.<cluster-name>.hasura-app.io/ui.

It allows your application users to login/signup seamlessly using the authentication providers configured in the conf/auth.yaml file. The UI adapts automatically to display the enabled auth providers. Just configure the auth conf of your Hasura Project and the UI Kit will immediatedly start working with the new changes.

By default, auth is configured to login using only Username Password. You can enable other auth providers by modifying the conf/auth.yaml file. The below section will demonstrate how to enable auth with Email and Google. For enabling other providers, read the instructions here.

Enable auth with email

  1. Open the conf/auth.yaml file from the project directory. Enable email provider to by setting defaultProviders > email > enabled to true.

  2. Run a git push to hasura remote to apply these changes to the cluster.

    $ git add .
$ git commit -m "Enabled email email provider"
$ git push hasura master

  3. You will need an email service to programmatically send emails. You can either configure one of sparkpost and mandrill. You can start using the service by running the below commands from the project directory.

    # Get your user-information
$ hasura user-info
# Copy the token from the output of above command and paste in the following
$ hasura secret update notify.hasura.token <token>

  4. Navigate to auth.<cluster-name>.hasura-app.io/ui and you will see the auth with email enabled.

Enable auth with Google

  1. Obtain your Google OAuth client ID and client secret.

  2. Open the conf/auth.yaml file from the project directory. Enable the Google provider by setting defaultProviders > google > enabled to true.

  3. Find the google key in conf/auth.yaml and enter your client ID in the clientIds array there. (The google key might be commented)

    auth.yaml
      ## For example if your client ID is "xxxxxx"
  google:
    clientIds: ["xxxxxx"]
    clientSecret:
      secretKeyRef:
        key: auth.google.client_secret
        name: hasura-secrets

  4. Add the client secret to secrets by running the following command from your project directory.

    $ hasura secret update auth.google.client_secret <client-secret>

  5. Finally run a git push to the hasura remote to apply these configuration changes to your cluster.

    $ git add .
$ git commit -m "Enabled Google Provider"
$ git push hasura master

  6. Navigate to auth.<cluster-name>.hasura-app.io/ui and you will see the auth with Google enabled.

« previous | next »
Want to contribute or report missing content? Check out the github repo for docs.
Powered by Sphinx. Copyright © 2019 Hasura.