Ace authorisation SDK

Install

npm install @ace-auth/sdk-browser or yarn add @ace-auth/sdk-browser

Use cases

SDK uses umd module declaration. So you can use it such as node module system (commonjs), amd or globally in browser.

Parameters

| Name | | Default value | Description | | -------------------- | -------- | --------------------- | ----------------------------------------------------------- | | aceEndpoint | Required | | Ace-ui endpoint. | | autorefresh | Optional | false | Refresh tokens automatically. (onAceEndpoint should be set) | | clientId | Required | | Ace client ID. | | debug | Optional | false | Verbose output | | defaultRedirectUri | Optional | | Default url for signIn, signUp, signOut methods | | flags | Optional | {} | Available flags: { nosso: boolean } | | locale | Optional | "en-US" | Locale. Available locales 'en-US' or 'zh-CN' | | onTokens | Optional | | Callback on new tokens received | | ownAceEndpoint | Optional | | Client ace backend endpoint. | | signInRedirectUri | Optional | | Url for signIn method. | | signOutRedirectUri | Optional | | Url for signOut method. | | signUpRedirectUri | Optional | | Url for signUp method. | | storage | Optional | window.localStorage | Storage implementing window.localStorage interface. | | storageKey | Optional | "ace-sdk-tokens" | Token's storage key |

Methods

| Name | Return value | Description | | ------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------ | | clearStorage() | Promise<void> | Clears storage data | | getTokens() | Promise<ITokens> | Returns client tokens | | getOriginUrl() | string | Returns origin url before signIn or signUp | | getSignInUrl() | string | Returns ace sign in url | | getSignUpUrl(params?: { referrer?: string }) | string | Returns ace sign up url | | on(event: string, cb: (tokens:ITokens)) => void) | void | Subscribes to event | | off(event: string, cb: (tokens:ITokens)) => void) | void | Unsubscribes from event | | setLocale(locale: 'en-US'|'zh-CN') | 'en-US'|'zh-CN' | Sets locale for ACE class | | signIn() | Promise<ITokens|void> | Starts sign in flow if anonymous user, returns tokens if logged in | | signOut() | Promise<void> | Starts sign out flow | | signUp(params?: { referrer?: string }) | void | Starts sign in flow |

Interfaces

interface ITokens {
  access_token: string;
  id_token: string;
}

Examples

es modules (typescript)

class App extends React.Component {
  signIn() {
    ace.signIn().then(data => {
      if (data && data.access_token && data.id_token) {
        alert('already logged');
      }
    });
  }

  signUp() {
    ace.signUp();
  }

  logout() {
    ace.signOut();
  }

  getTokens() {
    ace
      .getTokens()
      .then(tokens => {
        alert(JSON.stringify(tokens, null, 2));
      })
      .catch(() => {
        alert('unathorized');
      });
  }

  render(): React.ReactNode {
    return (
      <div className="App">
        <header className="App-header">
          <div className="App-buttons">
            <button onClick={this.signIn.bind(this)}>Sign In</button>
            <button onClick={this.signUp.bind(this)}>Sign Up</button>
            <button onClick={this.logout.bind(this)}>Logout</button>
            <button onClick={this.getTokens.bind(this)}>getTokens</button>
          </div>
        </header>
      </div>
    );
  }
}

export default App;

CommonJs

const React = require('react');
const AceSdk = require('@ace-auth/sdk-browser');
// Example storage below.
const Storage = require('./storage');

const ace = new AceSdk.CreateClient({
  aceEndpoint: 'http://example.com',
  ownAceEndpoint: 'http://example.com',
  clientId: '<clientId>',
  signInRedirectUri: 'http://example.com/',
  signUpRedirectUri: 'http://example.com/',
  storage: new Storage(),
  locale: 'en-US',
});

class App extends React.Component {
  signIn() {
    ace.signIn().then(data => {
      if (data && data.access_token && data.id_token) {
        alert('already logged');
      }
    });
  }

  signUp() {
    ace.signUp();
  }

  logout() {
    ace.signOut();
  }

  getTokens() {
    ace
      .getTokens()
      .then(tokens => {
        alert(JSON.stringify(tokens, null, 2));
      })
      .catch(() => {
        alert('unathorized');
      });
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <div className="App-buttons">
            <button onClick={this.signIn.bind(this)}>Sign In</button>
            <button onClick={this.signUp.bind(this)}>Sign Up</button>
            <button onClick={this.logout.bind(this)}>Logout</button>
            <button onClick={this.getTokens.bind(this)}>getTokens</button>
          </div>
        </header>
      </div>
    );
  }
}

export default App;

global

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <script defer src="https://unpkg.com/@ace-auth/sdk-browser"></script>
    <script defer>
      window.ace = new window.AceSdk.CreateClient({
        aceEndpoint: '<%=aceUrl %>',
        ownAceEndpoint: location.origin,
        clientId: '<%=clientId %>',
        signInRedirectUri: location.origin,
        signUpRedirectUri: location.origin,
      });

      document.getElementById('login-button').onclick = function () {
        ace.signIn();
      };
      document.getElementById('signin-button').onclick = function () {
        ace.signUp({ referrer: '<userValidEmail>' });
      };
      document.getElementById('signout-button').onclick = function () {
        ace.signOut();
      };
    </script>
    <title>Simple App</title>
  </head>
  <body>
    <button id="login-button">Login</button> <button id="signin-button">Sign Up</button>
    <button id="signout-button">Sign Out</button>
  </body>
</html>

storage

export default class Storage {
  constructor() {
    this._store = {};
  }

  getItem(key) {
    return this._store[key] || null;
  }

  setItem(key, value) {
    this._store[key] = value.toString();
  }

  removeItem(key: string) {
    this._store[key] = null;
  }

  clear() {
    this._store = {};
  }
}