# @ace-auth/sdk-browser

> SDK for Ace authorization system

Latest version **0.0.13** (published 2020-09-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @ace-auth/sdk-browser
pnpm add @ace-auth/sdk-browser
yarn add @ace-auth/sdk-browser
bun add @ace-auth/sdk-browser
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.13 |
| Published | 2020-09-09 |
| First published | 2019-02-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 133.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Jemjar |
| Maintainers | seyar, devops_sandbx |
| Keywords | ace, sdk-browser |

## Links

- npm: https://www.npmjs.com/package/@ace-auth/sdk-browser
- npm.io page: https://npm.io/package/@ace-auth/sdk-browser

## Dependencies (1)

- [query-string](https://npm.io/package/query-string.md) ^6.13.1

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 0.0.13 (latest) — 2020-09-09
- 0.0.12 — 2019-11-05
- 0.0.12-rc.0 — 2019-10-28
- 0.0.11 — 2019-09-24
- 0.0.10 — 2019-06-24
- 0.0.10-beta.1 — 2019-06-21
- 0.0.10-beta.0 — 2019-06-20
- 0.0.10-beta — 2019-06-20
- 0.0.9 — 2019-05-20
- 0.0.9-beta.8 — 2019-05-11
- 0.0.9-beta.7 — 2019-05-03
- 0.0.9-beta.6 — 2019-04-20
- 0.0.9-beta.5 — 2019-04-19
- 0.0.9-beta.4 — 2019-04-19
- 0.0.9-beta.3 — 2019-04-12
- … 9 more at https://npm.io/package/@ace-auth/sdk-browser/versions

## README

# 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'&#124;'zh-CN')           | `'en-US'`&#124;`'zh-CN'`       | Sets locale for ACE class                                          |
| signIn()                                          | `Promise<ITokens`&#124;`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

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

## Examples

### es modules (typescript)

```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

```javascript
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

```html
<!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

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

---
_Source: https://npm.io/package/@ace-auth/sdk-browser · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._