Community maintained

System Requirements

This tutorial has been tested with the following:

  • NodeJS 6.3
  • npm 3.10.3
  • @cycle/xstream-run 3.0.3
  • cyclejs-auth0 1.1.0

Before Starting

Please remember that for security purposes, you have to register the URL of your app in the Client Settings section as the callbackURL.

Right now, that callback is set to the following:


1. Install the cyclejs-auth0 Package

To install both cyclejs-auth0 and the cyclic-router (needed to parse the token sent by Auth0), from the command line, run:

npm install cyclejs-auth0 cyclic-router

2. Instantiate the Driver and Configure Auth0Lock

In your main application file, you can now setup the auth0Driver and feed it your clientID and domain:

import {createHistory} from "history";
import {makeRouterDriver} from 'cyclic-router'
import {makeAuth0Driver, protect} from "cyclejs-auth0";

function main(sources) {
    //your application's code

const drivers = {
    auth0: makeAuth0Driver('YOUR_CLIENT_ID', 'YOUR_AUTH0_DOMAIN'),
    router: makeRouterDriver(createHistory())

3. Implement the Login

Now that everything is set, you can activate authentication on some of your components. Activating authentication on a component is as simple as calling the protect function on that component. Let's assume you have a Todos component and you want to ensure the user is logged in to see it.

function main(sources) {
    const ProtectedTodos = protect(Todos); //here we wrap the Todos component in the protect function
    const protectedTodosInstance = ProtectedTodos(sources);

    return {
        DOM: protectedTodosInstance.DOM,
        HTTP: protectedTodosInstance.HTTP

Now if the user is not logged in when the component is instantiated, the Auth0 form will show up.

4. Configuring the Login Form

You may want to configure the behavior of the Auth0 login form. To achieve that, you can use the auth0ShowParams options on the protect function:

const ProtectedComponent = protect(Component, {
    auth0ShowParams: {
        authParams: { scope: "openid nickname" },
        responseType: "token"

It defaults to:

    authParams: { scope: "openid" },
    responseType: "token"

All the available configurable parameters are supported, see User configurable options.

After authentication, the protect function will handle the token parsing and store it to localStorage.

4. Configure Secure Calls to Your API

To configure secure calls to the API you are creating, you need to decorate all your newly secured component's HTTP calls with the JSON Web Token that has been stored in localStorage. To do that, you can set a decorator that will be called on each HTTP request and where you can add the Authorization header.

const ProtectedComponent = protect(Component, {
    decorators: {
        HTTP: (request, token) => {
            return {
                headers: {
                    //Will add the Authorization header to
                    //any of the http request sent by the component
                    "Authorization": "Bearer " + token

5. Retrieve the User Profile and Display User Information

Once a component is protected, it is given a props object that contains a token$ stream that can be used to either:

  • be decoded to get some basic information about your user (sub, nickname ... depending on your authParams.scope setting);
  • send a getProfile request to the Auth0 lock to retrieve a full profile.
function Component(sources) {
    const token$ = sources.props.token$; //the token$ added by the protect function

    const userProfile$ = sources
        .select("getProfile") //read to response of the lock to the getProfile method call

    return {
        auth0: token$
            .filter(token => !!token) //filter empty tokens
            //send the getProfile action to the auth0 driver
            .map(token => ({ action: "getProfile", params: token })),

        DOM: userProfile$ //displays the user profile once fetched
            .map(user => p([
                span(".nickname", user.nickname)
<p>Welcome <span class="nickname"></span></p>

To discover all the available properties of a user's profile, see Auth0 Normalized User Profile. Note that the properties available depend on the social provider used.

6. Implement the Logout

To log out, you simply need to send the logout action to the Auth0 driver.

function main(sources) {
    const logoutAction$ = sources

    return {
        auth0: logoutAction$.mapTo({ action: "logout" })

Persisting Application State

Lock uses redirect mode by default, meaning that a full page refresh will occur when users go through the authentication process in your application. This can be undesirable for single page apps, especially if the application contains state that should be displayed to the user again after they authenticate. For example, it may be the case that your users can initiate authentication from an arbitrary route within your single page app and you may want to return them to that location (along with any relevant state) after authentication is complete.

The recommended solution for this is to persist any necessary application state in local storage or a cookie before the user logs in or signs up. With this data, you can provide some custom post-authentication logic in the listener for the authenticated event to allow the user to pick up from where they left off.

In cases where storing application state is not possible, Lock's popup mode can be used. Please note that popup mode is not recommended. Known bugs in certain browsers prevent popup mode from functioning as expected under some circumstances.

Use Auth0 for FREECreate free Account