Many apps need a way to authenticate users – to verify their identity. This allows the app to tell users apart, store information about them and grant them special permissions. Reindex provides a built-in user authentication system. When user is authenticated the following happens:

• If such user didn’t exist, a new record in User type is created
• viewer root field will return current user information (it returns null for anonymous users)
• Permission system starts to use current user id instead of using anonymous user permissions.

Reindex provides social login with Facebook, Google, Twitter and GitHub. It is a client-side only solution, so no backend code is required.

Setting up authentication providers #

Adding Reindex authentication to your app has following steps:

1. Setting up an app in the provider system (e.g. Google).
2. Adding app access keys to ReindexAuthenticationProvider type.
3. Using reindex-js client library to sign users in.

Let’s create a Google application and configure it for Reindex authentication.

Go to Google Application Console, click at Create Project and enter required information.

When the app has been created, to APIs (under APIs & auth) and find Google+ API on the list. Click Enable API.

Go to Credentials. Click on Add credentials and select OAuth 2.0 client ID. Click on Configure consent screen and fill in the name of the project and other information, if you desire. Click Save.

Now you can select Web application in Create Client ID dialog. Set Authorized redirect URIs to:

https://NAME-OF-YOUR-APP.myreindex.com/auth/google

Press Create. A dialog will appear with Client ID and Cliend secret. Open GraphiQL console (reindex graphiql) and add the authentication provider using the following query:

mutation createGoogleProvider {
  createReindexAuthenticationProvider(input: {
    type: google,
    clientId: "YOUR-GOOGLE-CLIENT-ID",
    clientSecret: "YOUR-GOOGLE-CLIENT-SECRET",
    isEnabled: true
  }) {
    changedReindexAuthenticationProvider {
      clientId,
      id,
      clientSecret,
      type,
      isEnabled
    }
  }
}

Here we create an authentication provider in Reindex system. The result should be:

{
  "data": {
    "createReindexAuthenticationProvider": {
      "ReindexAuthenticationProvider": {
        "type": "google",
        "clientId": "YOUR-GOOGLE-CLIENT-ID",
        "clientSecret": "YOUR-GOOGLE-CLIENT-SECRET",
        "isEnabled": true
      }
    }
  }
}

This means we have successfully enabled Google as our authentication provider. The only thing left is to use that on our client.

Logging the user in #

Reindex instances provides method login to authenticate user. It accepts provider name and returns a promise. Promise resolves when user successfully logged in with an object that has key user with user information in it. If login failed for any reason, promises fails with information about the reason. In addition to login, Reindex also provides logout method for the opposite action.

reindex-starter-kit-react already comes with the code to log in and log out enabled for all supported providers. We can remove every provider by Google for now. We force reload on every authentication status change to clear Relay internal store, so that it can’t leak to unauthorized user.

If everything went fine, once you click “Login with Google”, the window should appear asking for your Google login. Once you successfully authorized the application, the view will change to one displaying your login information.