System Requirements

This tutorial have 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 Application 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 asume 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 storing 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. Log out

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

function main(sources) {
    const logoutAction$ = sources

    return {
        auth0: logoutAction$.mapTo({ action: "logout" })
Try Auth0 for FREECreate free Account