# authentic-ui

> Authentic UI is a set of client side views that use authentic-client to provide an easy signup and authentication flow.

Latest version **5.0.1** (published 2025-08-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install authentic-ui
pnpm add authentic-ui
yarn add authentic-ui
bun add authentic-ui
```

## Health

**Score 25/100 (F)** — status: maintenance-mode.

Positive: no vulnerabilities.

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

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.0.1 |
| Published | 2025-08-07 |
| First published | 2016-01-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 60 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11 |
| Maintainers | dguttman |
| Keywords | authentication, authentic, auth |

## Links

- npm: https://www.npmjs.com/package/authentic-ui
- Repository: https://github.com/davidguttman/authentic-ui
- Homepage: https://github.com/davidguttman/authentic-ui#readme
- Issues: https://github.com/davidguttman/authentic-ui/issues
- npm.io page: https://npm.io/package/authentic-ui

## Dependencies (8)

- [csjs](https://npm.io/package/csjs.md) ^1.1.0
- [xtend](https://npm.io/package/xtend.md) ^4.0.1
- [nanohtml](https://npm.io/package/nanohtml.md) ^1.10.0
- [insert-css](https://npm.io/package/insert-css.md) ^2.0.0
- [lodash.find](https://npm.io/package/lodash.find.md) ^4.6.0
- [wildemitter](https://npm.io/package/wildemitter.md) ^1.2.0
- [@dguttman/yo-yo](https://npm.io/package/@dguttman/yo-yo.md) ^1.4.2
- [authentic-client](https://npm.io/package/authentic-client.md) ^3.0.1

## Alternatives

- [@pothos/plugin-authz](https://npm.io/package/@pothos/plugin-authz.md) — 12.4K weekly downloads
- [@bounded-sh/client](https://npm.io/package/@bounded-sh/client.md) — 3.2K weekly downloads
- [@luigi-project/plugin-auth-oauth2](https://npm.io/package/@luigi-project/plugin-auth-oauth2.md) — 2.3K weekly downloads
- [@nocobase/plugin-verification](https://npm.io/package/@nocobase/plugin-verification.md) — 2.0K weekly downloads
- [escher-request](https://npm.io/package/escher-request.md) — 545 weekly downloads

## Recent versions

- 5.0.1 (latest) — 2025-08-07
- 5.0.0 — 2025-08-02
- 4.0.4 — 2025-08-01
- 4.0.3 — 2025-08-01
- 4.0.2 — 2025-08-01
- 4.0.1 — 2024-06-15
- 4.0.0 — 2024-06-15
- 3.0.0 — 2020-12-26
- 2.3.1 — 2018-06-25
- 2.3.0 — 2018-04-30
- 2.2.0 — 2018-04-12
- 2.0.2 — 2018-04-12
- 2.0.1 — 2017-09-22
- 2.0.0 — 2017-08-25
- 1.1.0 — 2017-04-26
- … 5 more at https://npm.io/package/authentic-ui/versions

## README

# Authentic UI #

Authentic UI is a set of client side views that use authentic-client to provide an easy signup and authentication flow.

Each method will return a DOM element for you to include wherever you need it.

## Examples ##

```js
var qs = require('querystring')
var AuthenticUI = require('authentic-ui')

var aui = AuthenticUI({
  server: 'http://authenticserver.com',
  links: {
    signup: '#/signup',
    login: '#/login',
    changePasswordRequest: '#/change-password-request'
  }
})

// Log In
document.body.appendChild(
  aui.login(function (err, result) {
    // logged in, now redirect to main content
    window.location.hash = '/main-content'
  })
)

// Sign Up
document.body.appendChild(
  aui.signup({
    from: 'Example Signup <example@signup.com>',
    subject: 'Welcome!',
    confirmUrl: window.location.origin + '#/confirm'
  })
)

// Confirm
var query = qs.parse(window.location.search.slice(1))
document.body.appendChild(
  aui.confirm({
    email: query.email,
    confirmToken: query.confirmToken
  }, function onLogin (err, result) {
    // logged in, now redirect to main content
    window.location.hash = '/main-content'
  })
)

// Change Password Request
document.body.appendChild(
  aui.changePasswordRequest({
    from: 'Example ChangePassword <example@signup.com>',
    subject: 'Change Your Password!',
    changeUrl: window.location.origin + '#/change-password'
  })
)

// Change Password
var query = qs.parse(window.location.search.slice(1))
document.body.appendChild(
  aui.changePassword({
    email: query.email,
    changeToken: query.changeToken
  }, function onLogin (err, result) {
    // password changed and logged in, now redirect to main content
    window.location.hash = '/main-content'
  })
)

// Log Out
aui.logout() // instant

```

## API ##

### AuthenticUI(opts) ###

This is the main entry point. Accepts an options object and returns an instance.

```js
var aui = AuthenticUI({
  server: 'http://authenticserver.com',
  links: {
    signup: '#/signup',
    login: '#/login',
    changePasswordRequest: '#/change-password-request'
  },
  googleSignIn: false
})

// now you can do aui.signup()/login()/etc...
```

#### options ####

`AuthenticUI()` takes an options object as its argument, only `server` is required:

* `server`: the url of the `authentic-server`, e.g. 'http://auth.yourdomain.com'

Optional:

* `prefix`: defaults to `/auth` -- if you set a custom prefix for your `authentic-server`, use that same prefix here
* `titles`: AuthenticUI can display custom titles for signup, login, and change-password.
  * If omitted, defaults will be used (`Log in to your account`, etc...).
```js
{
  signup: 'Sign up now!',
  login: 'Log in here 👇',
  changePasswordRequest: 'Let\'s get you a new password'
}
```
* `links`: AuthenticUI can display links to signup, login, and change-password.
  * If omitted, defaults will be used (`#/login`, `#/signup`, etc...).
  * To hide these links use `{links: false}`.
  * If you'd like to customize them, use an object like one of the following:

```js
{
  signup: '#/signup', // text will be "Sign Up"
  login: '#/login', // text will be "Log In"
  changePasswordRequest: '#/change-password-request' // text will be "Reset Password"
}

// or

{
  signup: {href: '#/new-account', text: 'New Account'},
  login: {href: '#/sign-in', text: 'Sign In'},
  changePasswordRequest: {href: '#/forgot', text: 'Forgot something?'}
}
```

* `styles`: If `styles` is omitted, default styling will be used. To clear styling use `{styles: false}`, and to use custom CSS class name(s), use an object that maps components to a string of class names. For example, if you were using [Basscss](http://basscss.com), you could do the following:

```js
{
  box: 'max-width-3 mx-auto border rounded pb2',
  title: 'h3 p2 bold white bg-blue mb2',
  input: 'h4 p1 mb1',
  error: 'red',
  submit: 'btn not-rounded bg-blue white m2',
  disabled: 'bg-silver',
  links: 'p6',
  link: 'italic'
}
```

See `/components/shared/styles.js` for the components and their default styles.

* `googleSignIn`: If `googleSignIn` is `true`, this will add a "Sign in with Google" link to the bottom of the Log In page. Your `authentic-server` needs to have this set up to work.

### aui.authToken() ###

Returns the user's `authToken` if one exists/the user is logged in.

### aui.email() ###

Returns the user's `email` if one exists/the user is logged in.

### aui.login([opts,] onLogin)

Returns a login element. Will also call `onLogin` when successfully logged in.

```js
var el =  aui.login(function (err, result) {
  // logged in, now redirect to main content
  window.location.hash = '/main-content'
})
```

### aui.signup(opts[, onSignup])

Returns a signup element. Options are passed through `authentic-client` to `authentic-server`. Will display a message to check email after successful submission.

```js
var el = aui.signup({
  confirmUrl: window.location.origin + '#/confirm',
  provide: { /* use this to send additional properties to authentic-server */ }
})
```

### aui.confirm(opts, onLogin)

Returns a confirm element. Will display a message if there's an error, otherwise will call `onLogin` after `confirmDelay` milliseconds if successfully logged in. Required options: `email` and `confirmToken`.

```js
var query = require('querystring').parse(window.location.search.slice(1))
var el = aui.confirm({
  email: query.email,
  confirmToken: query.confirmToken
}, function onLogin (err, result) {
  // logged in, now redirect to main content
  window.location.hash = '/main-content'
})
```

### aui.changePasswordRequest(opts[, onReset])

Returns a change-password-request element. Options are passed through `authentic-client` to `authentic-server`. Will display a message to check email after successful submission.

```js
var el = aui.changePasswordRequest({
  changeUrl: window.location.origin + '#/change-password',
  provide: { /* use this to send additional properties to authentic-server */ }
})
```

### aui.changePassword(opts, onLogin)

Returns a change-password element. Required options: `email` and `changeToken`. Will also call `onLogin` when successfully logged in after password change.

```js
var query = require('querystring').parse(window.location.search.slice(1))
var el = aui.changePassword({
  email: query.email,
  changeToken: query.changeToken
}, function onLogin (err, result) {
  // password changed and logged in, now redirect to main content
  window.location.hash = '/main-content'
})
```

### aui.logout() ###

Instantly logs out by forgetting user `email` and `authToken`.

## License ##

MIT

---
_Source: https://npm.io/package/authentic-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._