npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

authentic-ui

v4.0.1

Published

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

Downloads

58

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

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 <[email protected]>',
    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 <[email protected]>',
    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.

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...).
{
  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:
{
  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, you could do the following:
{
  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.

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.

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.

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.

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.

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