Auth Bundle

This bundle manages auth0 authentication for citibot applications.

Getting Started

Install the bundle

yarn add @citibot/auth

Set Environment Variables

AUTH0_DOMAIN=citibot.auth0.com
AUTH0_CLIENTID=[your apps client id]

If using the citibot app template, remember to add the env replace keys to your rollup.config.js. (see https://github.com/citibot/template for details)

Set up callback route

In the routes.js bundle, you will want to create a url for your callback handler.

import Authenticate from '../pages/Authenticate.html'

{
  ...
  '/callback': Authenticate
}

Create Authenticate.html page

<script>
import { store, reduxBundler } from '../store'
import { onMount } from 'svelte'

const { selectLoggedIn, doHandleAuthentication, doUpdateUrl } = reduxBundler

onMount(() => {
  store.subscribe(() => {
    if (selectIsLoggedIn()) {
      doUpdateUrl('/home') // redirect to authenticated page
    }
  })


 doHandleAuthentication() 

})


</script>
<section>
  <p>Logging In</p>
</section>
<style>
  section {
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>

Validate authentication for each authenticated page

TODO: Add example

In each data bundle using the selectAccessToken selector to get the access token for authentication.

TODO: Add example

Also supports passwordless authentication, in this case you will want to use the action creators - doPasswordlessStart and doPasswordlessLogin.

See https://auth0.com/docs/connections/passwordless/spa-sms#use-your-own-ui

for more details.

Testing

Use tape-modern and nock to create tests that call the redux bundle by calling action creators and mocking the external api calls to confirm that the selectors are updated correctly for the following scenarios.

• Login
• Logout
• RenewToken
• ScheduleRenewToken