Socket.io

Sample Project

Download this sample project configured with your Auth0 API Keys.

System Requirements
  • Socket.io 1.4.5
  • NodeJS 5.0.0
Show requirements

1. Set up the Allowed Origin (CORS) in Auth0

Go to the Application Settings section in the Auth0 dashboard and make sure to add your URL as an Allowed Origin (CORS). If you're testing it locally, it should contain the following value:

http://localhost:3001

2. Installation

Install socketio-jwt from npm and save it to your package.json using

npm install --save socketio-jwt

3. Add the Auth0 Script and Set the Viewport

Add the code below to the index.html file to include the Auth0 lock script and set the viewport:

<!-- Auth0Lock script -->
<script src="https://cdn.auth0.com/js/lock/10.6/lock.min.js"></script>

<!-- Setting the right viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

4. Configure Auth0Lock

Configure Auth0Lock with your clientId and domain:

var lock = null;
$(document).ready(function() {
   lock = new Auth0Lock('YOUR_CLIENT_ID', 'YOUR_AUTH0_DOMAIN');
});

To discover all the available options, see User configurable options.

5. Implement the Login

To implement the login, call the .show() method of Auth0's lock instance when a user clicks the login button, and save the JWT token to localStorage for later use in calling a server or an API:

var userProfile;
var userToken = localStorage.getItem('userToken');;

lock.on('authenticated', function(authResult) {
    lock.getProfile(authResult.idToken, function(error, profile) {
        if (error) {
            // Handle error
            return;
        }
        localStorage.setItem('userToken', authResult.idToken);
        userProfile = profile;
        userToken = authResult.idToken;
    });
});

if (userToken) {
    lock.getProfile(userToken, function (err, profile) {
        if (err) {
            return alert('There was an error getting the profile: ' + err.message);
        }        
        userProfile = profile;
    });
}

$('#login button').click(function(e){
  e.preventDefault();
  lock.show();
});

6. Set Authorization for Socket.io

Add the following to your index.js file.

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var socketioJwt = require('socketio-jwt');

io
  .on('connection', socketioJwt.authorize({
    secret: 'YOUR_CLIENT_SECRET',
    timeout: 15000 // 15 seconds to send the authentication message
  })).on('authenticated', function(socket) {
    //this socket is authenticated, we are good to handle more events from it.
    console.log('hello! ' + JSON.stringify(socket.decoded_token));
  });

7. Load the socket.io-client

Add the following snippet before the </body> on index.html

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io();
  socket.on('connect', function () {
  socket.on('authenticated', function () {
  //Do

  })
  .emit('authenticate', {token: userToken}); // send the jwt
  });
</script>

No URL is specified when doing var socket = io();, because the default behaviour is to connect to the host that serves the page.

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 in 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