• Docs
  • Pricing
  • Support
  • Blog
  • Login

›On the frontend

Intro

  • What's OneGraph?
  • How does it work?
  • Creating your first app
  • Making your first query
  • OneGraphiQL
  • Authentication & Security Overview
  • Custom Google Auth

On the frontend

  • Using with Apollo
  • Log in to services
  • Example with create-react-app

External Authentication

  • What are JWTs?
  • AuthGuardian
  • Securing your Apollo server
  • Securing your Hasura API
  • Securing your Netlify site
  • Securing your express.js app
  • Advanced JWT customization with webhooks

Subscriptions

  • Subscriptions
  • Webhook-based subscriptions
  • Websocket-based subscriptions
  • Salesforce subscriptions
  • GitHub subscriptions
  • Gmail Subscriptions

Advanced

  • Persisted Queries
  • Mailchimp Signup with Persisted Queries

OneGraph's Auth.js

Before you can make queries against 3rd-party services like Stripe, the client needs to grant access to your app through an OAuth flow.

OneGraph provides an easy-to-use javascript auth library to manage authenticating your clients with 3rd-party services.

Installation

Add the onegraph-auth library to your app:

npm install onegraph-auth --save

Create an Auth Client

For our example, we'll log in to Stripe.

First, we'll construct a new OneGraphAuth instance. It requires the name of the service and an appId.

import OneGraphAuth from 'onegraph-auth';

const APP_ID = YOUR_APP_ID;

const auth = new OneGraphAuth({
  appId: APP_ID,
});

The OneGraphAuth client has 3 methods, isLoggedIn, login, logout.

Check if the user is loggedIn

The isLoggedIn method takes a service name as its only argument and will return a promise with a boolean indicating if the user is logged in to that service.

auth.isLoggedIn('github').then((isLoggedIn) => {
  if (isLoggedIn) {
    console.log('Already logged in to GitHub');
  } else {
    console.log('Not logged in to GitHub.');
  }
});

Log the user in

The login method takes a service name as its only argument and will take the client through the OAuth login flow for the service and return a promise that resolves after the client finishes the flow.

After the client finishes, you can call isLoggedIn again to check if the user successfully made it through the flow.

auth
  .login('github')
  .then(() => {
    auth.isLoggedIn('github').then((isLoggedIn) => {
      if (isLoggedIn) {
        console.log('Successfully logged in to GitHub');
      } else {
        console.log('Did not grant auth for GitHub');
      }
    });
  })
  .catch((e) => console.error('Problem logging in', e));

Log the user out

The logout method takes a service name as its only argument and will log the client out and return a promise wrapping an object with a result key whose value is either 'success' or 'failure' to indicate whether the user is still logged in.

auth.logout('github').then((response) => {
  if (response.result === 'success') {
    console.log('Logout succeeded');
  } else {
    console.log('Logout failed');
  }
});

Use OneGraphAuth with Apollo

OneGraphAuth maintains an OAuth token that authenticates you with OneGraph. We need to tell Apollo how to send that token to OneGraph in the Authentication header.

We'll set up our Apollo client to use the token:

import ApolloClient from 'apollo-boost';
import OneGraphAuth from 'onegraph-auth';

const APP_ID = YOUR_APP_ID;

const auth = new OneGraphAuth({
  appId: APP_ID,
});

const client = new ApolloClient({
  uri: 'https://serve.onegraph.com/graphql?app_id=' + APP_ID,
  request: (operation) => operation.setContext({headers: auth.authHeaders()}),
});

In the example, we added a request handler that will run every time Apollo sends a new request to OneGraph. The token could change as the user signs in and out of new services, so we should always send the newest token.

OneGraph also provides its own Apollo client that will handle this for you.

First install the client:

npm install onegraph-apollo-client --save

Then use the client in place of ApolloClient in your app:

import OneGraphApolloClient from 'onegraph-apollo-client';
import OneGraphAuth from 'onegraph-auth';

const APP_ID = YOUR_APP_ID;

const auth = new OneGraphAuth({
  appId: APP_ID,
});

const client = new OneGraphApolloClient({
  oneGraphAuth: auth,
});
← Using with ApolloExample with create-react-app →
Links
OneGraph Overview Example projectsOneGraphiQL Explorer
Support
Live chat on Spectrum> TwitterBlog
More
Terms of ServicePrivacy Policy
Copyright © 2021 OneGraph