@ace-auth/sdk-browser NPM

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 = {};
  }
}

ace sdk-browser

query-string

@everything-registry/sub-chunk-24

4 years ago

5 years ago

5 years ago

5 years ago