Set up a Webapp able to get a authentication token using login and password page

Authenticate and authorize process of HummBox API is delegated to Auth0 service.

This tutorial explains how to create an application able to get a token from Auth0 with a login page. The example code is presented under NodeJS programming language.

Pre requisite

To implement the authentication process in your application, you need credentials given by GreenCityZen : client ID, client secret, … Be sure your have them before starting the process.

Auth0 documentation & Example

Please also refer to Auth0 documentation : Token based authentication, Auth0 API documentation & How to use an access token.

To get a token

1 - please go on the app admin : https://app.humm-box.com/admin/

2  - click on your name : 

3 - Pop up window appears with your token  as shown below.

Tutorial

Step 1: Install the dependencies

Install the necessary middlewares:

# installation with npm
npm install passport passport-auth0 connect-ensure-login --save

Step 2: Configure the Middleware

Provide your Auth0 client details as configuration values for an instance of Auth0Strategy. Tell passport to use the strategy.

// app.js

const passport = require('passport');
const Auth0Strategy = require('passport-auth0');

// Configure Passport to use Auth0
const strategy = new Auth0Strategy(
{
domain: <YOUR_DOMAIN>',
clientID: '<YOUR_CLIENT_ID>',
clientSecret: 'YOUR_CLIENT_SECRET',
callbackURL: 'http://localhost:3000/callback'      // URL of the application to be routed after successfull login

}, (accessToken, refreshToken, extraParams, profile, done) => { return done(null, profile); } ); passport.use(strategy); // This can be used to keep a smaller payload passport.serializeUser(function(user, done) { done(null, user); }); passport.deserializeUser(function(user, done) { done(null, user); }); // ... app.use(passport.initialize()); app.use(passport.session());

Step 3: Trigger Authentication

Auth0’s hosted login page can be used to allow users to log in.
Add a route called /login and use the env object to set the Client ID, Domain, and Callback URL for your client. This route will instantiate auth0.WebAuth and call the authorize method to redirect the user to Auth0’s hosted login page.

// routes/index.js

const express = require('express');
const passport = require('passport');
const router = express.Router();

const env = {
AUTH0_CLIENT_ID: 'LLIeCazHTJS8odUmdhrG2enWwPinrj51',
AUTH0_DOMAIN: 'humm-server.eu.auth0.com',
AUTH0_CALLBACK_URL: 'http://localhost:3000/callback'
};

/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index');
});

// Perform the login
router.get(
'/login',
passport.authenticate('auth0', {
clientID: env.AUTH0_CLIENT_ID,
domain: env.AUTH0_DOMAIN,
redirectUri: env.AUTH0_CALLBACK_URL,
audience: 'https://' + env.AUTH0_DOMAIN + '/userinfo',
responseType: 'code',
scope: 'openid'
}),
function(req, res) {
res.redirect('/');
}
);

// Perform session logout and redirect to homepage
router.get('/logout', (req, res) => {
req.logout();
res.redirect('/');
});

// Perform the final stage of authentication and redirect to '/user'
router.get(
'/callback',
passport.authenticate('auth0', {
failureRedirect: '/'
}),
function(req, res) {
res.redirect(req.session.returnTo || '/user');
}
);

Step 4: Deployment

Before deploying the service on the cloud, please give us the URL of the server so that we can enable the CORS header (white list)

Step 5 : use the token

Insert Authorization: bearer "your_token" into the header of each request

Then just put the token in the header