diff --git a/example/socketsio-auth0-sample/README.md b/example/socketsio-auth0-sample/README.md index a8467fc..ccc146e 100644 --- a/example/socketsio-auth0-sample/README.md +++ b/example/socketsio-auth0-sample/README.md @@ -4,7 +4,16 @@ This is the seed project you need to use if you're going to create a Socket.io s ### Configure your Auth0 credentials -First, you need to put your `AUTH0_DOMAIN` (example.auth0.com), your `AUTH0_CLIENT_ID` and your `AUTH0_CLIENT_SECRET` on the `auth0-variables.js` file . You can find this information in the Application Settings on your Auth0.com dashboard. +First, you need to set the ClientSecret, ClientId and Domain for your Auth0 app as environment variables with the following names respectively: `AUTH0_CLIENT_SECRET`, `AUTH0_CLIENT_ID` and `AUTH0_DOMAIN`. You can find this information in your Auth0 Dashboard. + +So, create a file named `.env` in the directory and set the values like the following: + +````bash +# .env file +AUTH0_CLIENT_SECRET=myCoolSecret +AUTH0_CLIENT_ID=myCoolClientId +AUTH0_DOMAIN=myCoolDomain +```` ### Set up the Allowed Origin (CORS) in Auth0 diff --git a/example/socketsio-auth0-sample/auth0-variables.js b/example/socketsio-auth0-sample/auth0-variables.js deleted file mode 100644 index b55e87d..0000000 --- a/example/socketsio-auth0-sample/auth0-variables.js +++ /dev/null @@ -1,5 +0,0 @@ -(function (exports){ - exports.AUTH0_DOMAIN = 'Your_Auth0_Domain'; - exports.AUTH0_CLIENT_ID = 'Your_Auth0_Client_Id'; - exports.AUTH0_CLIENT_SECRET = 'Your_Auth0_Client_Secret'; -})(typeof exports === 'undefined' ? this['auth0Variables']={}: exports); diff --git a/example/socketsio-auth0-sample/index.html b/example/socketsio-auth0-sample/index.html deleted file mode 100644 index 8d61c02..0000000 --- a/example/socketsio-auth0-sample/index.html +++ /dev/null @@ -1,90 +0,0 @@ - - - - Socket.IO chat - - - - - - - - - -
- -
-
- -
- -
-
- - - - - diff --git a/example/socketsio-auth0-sample/index.js b/example/socketsio-auth0-sample/index.js index a85192c..3e27d6a 100644 --- a/example/socketsio-auth0-sample/index.js +++ b/example/socketsio-auth0-sample/index.js @@ -1,20 +1,23 @@ -var app = require('express')(); +var express = require('express'); +var app=express(); var http = require('http').Server(app); var io = require('socket.io')(http); var socketioJwt = require('socketio-jwt'); -var auth0Variables = require('./auth0-variables'); +var dotenv = require('dotenv'); -app.get('/', function(req, res){ - res.sendFile(__dirname + '/index.html'); -}); +dotenv.load(); -app.get('/auth0-variables.js', function(req, res){ - res.sendFile(__dirname + '/auth0-variables.js'); -}); +var env = { + AUTH0_CLIENT_ID: process.env.AUTH0_CLIENT_ID, + AUTH0_DOMAIN: process.env.AUTH0_DOMAIN, +} + +app.set('views', __dirname + '/views') +app.set('view engine', 'jade'); io .on('connection', socketioJwt.authorize({ - secret: Buffer(auth0Variables.AUTH0_CLIENT_SECRET, 'base64'), + secret: Buffer(JSON.stringify(process.env.AUTH0_CLIENT_SECRET), 'base64'), timeout: 15000 // 15 seconds to send the authentication message })) .on('authenticated', function(socket){ @@ -24,7 +27,17 @@ io io.emit('chat message', msg); }); }); + +app.use(express.static(__dirname + '/public')); + +app.get('/', function (req, res) { + res.render('index', + { env: env } + + ) +}) http.listen(3001, function(){ console.log('listening on *:3001'); }); + diff --git a/example/socketsio-auth0-sample/package.json b/example/socketsio-auth0-sample/package.json index f4ab4e8..f2bf0dd 100644 --- a/example/socketsio-auth0-sample/package.json +++ b/example/socketsio-auth0-sample/package.json @@ -1,9 +1,14 @@ { - "name": "socket-chat-example", - "version": "0.0.1", - "description": "my first socket.io app", + "name": "socket-Auth0-chat-example", + "version": "1.0.0", + "description": "Auth0 + Socket.io seed", + "repository": "git://github.com/auth0/socketio-jwt", + "author": "Auth0", + "license": "MIT", "dependencies": { + "dotenv": "^1.2.0", "express": "^4.10.2", + "jade": "^1.11.0", "socket.io": "^1.3.6", "socketio-jwt": "^4.3.1" } diff --git a/example/socketsio-auth0-sample/public/stylesheets/style.css b/example/socketsio-auth0-sample/public/stylesheets/style.css new file mode 100644 index 0000000..f032aee --- /dev/null +++ b/example/socketsio-auth0-sample/public/stylesheets/style.css @@ -0,0 +1,10 @@ +* { margin: 0; padding: 0; box-sizing: border-box; } +body { font: 13px Helvetica, Arial; } +form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; } +form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; } +form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; } +#messages { list-style-type: none; margin: 0; padding: 0; } +#messages li { padding: 5px 10px; } +#messages li:nth-child(odd) { background: #eee; } +#login { width: 100%; padding: 10px } +#login button { width: 10%; padding: 8px; border: none; background: rgb(130, 255, 130);} diff --git a/example/socketsio-auth0-sample/views/index.jade b/example/socketsio-auth0-sample/views/index.jade new file mode 100644 index 0000000..6afedcd --- /dev/null +++ b/example/socketsio-auth0-sample/views/index.jade @@ -0,0 +1,68 @@ +extends layout + +block content + script(src="https://cdn.auth0.com/js/lock-7.12.js") + script(src="/socket.io/socket.io.js") + script(src="http://code.jquery.com/jquery-1.11.1.js") + + + div#login + button.btn Login + div#chat + ul#messages + form(action="") + input(id="m" autocomplete="off") + button.btn Send + + script. + var userProfile; + var userToken; + var lock = new Auth0Lock('#{env.AUTH0_CLIENT_ID}', '#{env.AUTH0_DOMAIN}'); + $('#chat').hide(); + $('#login button').click(function(e){ + e.preventDefault(); + lock.show(function(err, profile, token) { + if (err) { + //Error callback + alert('There was an error'); + alert(err); + } else { + console.log('connected and authenticated'); + //Success callback + userToken = token; + + //Save the JWT token + localStorage.setItem('userToken', token); + + //Save the profile + userProfile = profile; + + openChat(); + } + }) + }); + + function openChat(){ + var socket = io(); + socket.on('connect', function () { + socket.on('authenticated', function () { + //Do + $('#login').hide(); + $('#chat').show(); + $('form').submit(function(event){ + socket.emit('chat message', $('#m').val()); + $('#m').val(''); + return false; + }); + socket.on('chat message', function(msg){ + console.log("msg"); + $('#messages').append($('
  • ').text(msg)); + }); + }) + .emit('authenticate', {token: userToken}); // send the jwt + }) + }; + + + + diff --git a/example/socketsio-auth0-sample/views/layout.jade b/example/socketsio-auth0-sample/views/layout.jade new file mode 100644 index 0000000..5941a37 --- /dev/null +++ b/example/socketsio-auth0-sample/views/layout.jade @@ -0,0 +1,7 @@ +doctype html +html + head + + link(rel='stylesheet', href='/stylesheets/style.css') + body + block content