3.0.1 • Published 1 year ago

autharmor-sdk v3.0.1

Weekly downloads
2
License
MIT
Repository
github
Last release
1 year ago

AuthArmor Javascript Client-side SDK

🏁 Installation

You can integrate the AuthArmor SDK into your website by installing and importing our NPM package:

# Via NPM
npm i -s autharmor-sdk

# Via Yarn
yarn add autharmor-sdk

You can also load the SDK via our CDN by placing this script tag in your app's <head>

<script src="https://cdn.autharmor.com/scripts/autharmor-jsclient-sdk/v2.0.0/autharmor-jsclient-sdk_v2.0.0.js"></script>

Typescript

This SDK is fully coded in TypeScript and its definition files are bundled by default when installing it through NPM/Yarn

🧭 Usage

🚀 Initializing the SDK

In order to initialize the SDK, you'll have to create a new instance of the AuthArmor SDK with the url of your backend API specified in it.

const SDK = new AuthArmorSDK({
  endpointBasePath: "https://api.example.com/auth/autharmor", // (Optional) specify your backend's url
  publicKey: "...", // (Required) Specify the public-key you've generated from the AuthArmor Dashboard
  webauthnClientId: "...", // (Optional) Specify the WebAuthn Client ID you've generated from the AuthArmor Dashboard
  registerRedirectUrl: "...", // (Optional) Specify the URL that you'd like to redirect the user to after registering
  authenticationRedirectUrl: "..." // (Optional) Specify the URL that you'd like to redirect the user to after logging in
});

📃 Render the form in your site's UI

The AuthArmor SDK also comes with a pre-built form that you can render anywhere throughout your site which already handles several edge cases out-of-the-box by writing a single line of code!

AuthArmor.form.mount(".example-form-class-name");

The form has a couple of other options as well for advanced use, such as styling the form to use the same color scheme as your site or choosing which options you'd like to allow users to use for registration and authentication in your site.

AuthArmor.form.mount(".example-form-class-name", {
  usernameless: true, // (Boolean) Toggle usernameless auth
  defaultTab: "login" // (String) Could be one of ("login" | "register"), specifies tab that's going to be selected once the user lands in the page
  methods: [
    // ('authenticator' | 'magiclink' | 'webauthn') Specify allowed authentication methods
    "authenticator", // Push authentication/registration (Requires AuthArmor app)
    "magiclink", // Login/Register using Email only
    "webauthn" // Login/Register using WebAuthn (Requires webauthnClientId to be specified)
  ],
  styles: {
    // Specify a color scheme for the form to match your theme
    accentColor: "#0bdbdb",
    backgroundColor: "#2a2d35",
    tabColor: "#363a46",
    qrCodeBackground: "#202020",
    highlightColor: "#434857",
    inputBackground: "#212329"
  }
});

You can also modify the form's color scheme directly through CSS, this is useful especially if you're trying to have the form adapt for situations like the user switching between light/dark modes, etc...

Note: All of the form's CSS variables are prefixed with "autharmor" to avoid colliding with your own CSS variables

:root {
  --autharmor-accent-color: #0bdbdb;
  --autharmor-background-color: #2a2d35;
  --autharmor-tab-color: #363a46;
  --autharmor-qr-code-background: #202020;
  --autharmor-highlight-color: #434857;
  --autharmor-input-background: #212329;
}

@media (prefers-color-scheme: dark) {
  :root {
    --autharmor-accent-color: #0bdbdb;
    --autharmor-background-color: #2a2d35;
    --autharmor-tab-color: #363a46;
    --autharmor-qr-code-background: #202020;
    --autharmor-highlight-color: #434857;
    --autharmor-input-background: #212329;
  }
}

💥 Events

There are several events emitted by the SDK which you can attach to and have your app react accordingly.

Available Events

Event NameDescription
popupOverlayOpenedTriggered once the AuthArmor overlay for invite/auth shows
popupOverlayClosedTriggered once the AuthArmor overlay for invite/auth is removed
authenticatedTriggered once an authentication is completed successfully
registerSuccessTriggered once a registration is completed successfully
errorTriggered once an error occurs while accepting/declining an invite

Attaching an event listener

Attaching an event listener is pretty simple, all you'll have to do is call the on function with the event you wish to attach a function to followed by a callback function:

SDK.on("<event_name>", () => {
  // Do something...
});
3.0.1

1 year ago

3.0.0-beta.10

2 years ago

3.0.0-beta.9

2 years ago

3.0.0-beta.8

2 years ago

3.0.0-beta.1

2 years ago

3.0.0-beta.3

2 years ago

3.0.0-beta.2

2 years ago

3.0.0-beta.5

2 years ago

3.0.0-beta.4

2 years ago

3.0.0-beta.7

2 years ago

3.0.0-beta.6

2 years ago

2.4.7

2 years ago

2.4.8

2 years ago

2.4.3

2 years ago

2.4.2

2 years ago

2.4.5

2 years ago

2.4.6

2 years ago

2.4.0

2 years ago

2.3.5

2 years ago

2.3.4

2 years ago

2.3.2

2 years ago

2.3.1

2 years ago

2.3.3

2 years ago

2.3.0

3 years ago

2.2.0

3 years ago

2.1.2

3 years ago

2.1.1

3 years ago

2.1.3

3 years ago

2.1.0

3 years ago

2.0.0

3 years ago

2.0.0-alpha.22

3 years ago

2.0.0-alpha.28

3 years ago

2.0.0-alpha.27

3 years ago

2.0.0-alpha.26

3 years ago

2.0.0-alpha.25

3 years ago

2.0.0-alpha.24

3 years ago

2.0.0-alpha.23

3 years ago

2.0.0-alpha.9

3 years ago

2.0.0-alpha.11

3 years ago

2.0.0-alpha.10

3 years ago

2.0.0-alpha.19

3 years ago

2.0.0-alpha.18

3 years ago

2.0.0-alpha.17

3 years ago

2.0.0-alpha.16

3 years ago

2.0.0-alpha.15

3 years ago

2.0.0-alpha.14

3 years ago

2.0.0-alpha.13

3 years ago

2.0.0-alpha.12

3 years ago

2.0.0-alpha.21

3 years ago

2.0.0-alpha.20

3 years ago

2.0.0-alpha.7

3 years ago

2.0.0-alpha.8

3 years ago

2.0.0-alpha.3

3 years ago

2.0.0-alpha.4

3 years ago

2.0.0-alpha.5

3 years ago

2.0.0-alpha.6

3 years ago

2.0.0-alpha.2

3 years ago

2.0.0-alpha.1

3 years ago

1.4.4

4 years ago

1.4.3

4 years ago

1.4.2

4 years ago

1.0.10

4 years ago