wga-api v0.2.2

🏇 Authenticator API

User and team management for your app

Helper methods which may be used to access the Authenticator API using GraphQL.

Features

• 🔥 Works in Node and on the browser.
• ⚡️ Simple integration with React, Vue, and other browser libraries.
• 👾 Write, send, and handle GraphQL queries.
• 🏋️‍ Supports TypeScript and JavaScript.

Install

Using npm.

npm i --save wga-api

Using yarn.

yarn add wga-api

Setup

Start by importing the AuthenticatorAPI class.

import { AuthenticatorAPI } from 'wga-api'

A secret security key can be found in your Authenticator app settings.

const wga = new AuthenticatorAPI({
  secret: process.env.WGA_SECRET_KEY,
})

Note: use a package such as dotenv to securely store your secret variables.

Usage

Use the .create() method to create a new graphql dispatcher.

const retrieveUser = wga.create<{
  variables: {
    id: string,
  }
  data: {
    user: {
      id: string
      created: string
      updated: string
      name: string
      email: string
      username: string
      meta: { [key: string]: any }
    }
  }
}>({
  name: 'RetrieveUser',
  graphql: `
    query RetrieveUser($id: String) {
      user: RetrieveUser($id: string) {
        id
        created
        updated
        name
        email
        username
        meta
      }
    }
  `
})

Then use the .run(variables) method to send the graphql query.

retrieveUser.run({ id: '1234567890' })
  .then(data => {
    console.log(`User created at ${data.user.created}`)
  })
  .catch(error => {
    console.log(`An error occurred: ${error.message}`)
  })

Listen to all incoming dispatcher events with the .listen(data) method.

const unlisten = retrieveUser.listen(data => {
  console.log(`User created at ${data.user.created}`)
})

Below is an example of how the library can be used with React hooks.

const ShowUser = props => {
  const [user, setUser] = useState()
  useEffect(() => {
    return retrieveUser.listen(data => {
      setUser(data.user)
    })
  }, [])
  return (
    <div>
      <button onClick={() => retrieveUser.run({ id: props.id })}>
        Load User
      </button>
      <pre><code>{JSON.stringify(user, null, 2)}</code></pre>
    <div>
  )
}

Created with ❤️ by Window Gadgets.