Sign in through Steam using NodeJS
--
Allowing your users to sign in through steam is essential if you are operating a website connected to Steam’s services in any way. This way of authentication allows you to seamlessly collect user’s SteamID64, thus allowing you to see their Steam inventory, profile picture etc. In this article, I will teach you how to set up a “Sign in through Steam” system on your website using NodeJS.
NPM Installs
Firstly, we are going to need some npm installs. The following installs are required:
npm install expressnpm install express-sessionnpm install passportnpm install --save passport-steam
Don’t have npm isntalled? Head over to nodejs.org and install for your operating system of choice.
Start building the server
Assuming we are working with a vanilla project, we will need to start with the necessary code to build a simple server. All the code can be found on GitHub.
// Require all the installs
var express = require('express');
var passport = require('passport');
var session = require('express-session');
var passportSteam = require('passport-steam');
var SteamStrategy = passportSteam.Strategy;
var app = express();// Let's set a port
var port = 3000;// Spin up the server
app.listen(port, () => {
console.log('Listening, port ' + port);
});
You can run this code using (given that you named your application file app.js):
node app.jsIf you get any errors at this point, make sure that all the packages were installed correctly.
Set API Key
To continue, you will need to set up an API Key using your steam account. Head over to https://steamcommunity.com/dev/apikey, it will look something like this:
Type in “localhost” as the domain name, agree to the terms and click “register.” You will be redirected to a page with your steam API Key, copy it (you will need it for the next step).
Set up the SteamStrategy
Now we will need to add a lot of code for the authentication to work properly. The following is required:
// Required to get data from user for sessions
passport.serializeUser((user, done) => {
done(null, user);
});passport.deserializeUser((user, done) => {
done(null, user);
});// Initiate Strategy
passport.use(new SteamStrategy({
returnURL: 'http://localhost:' + port + '/api/auth/steam/return',
realm: 'http://localhost:' + port + '/',
apiKey: 'YOUR_API_KEY'
}, function (identifier, profile, done) {
process.nextTick(function () {
profile.identifier = identifier;
return done(null, profile);
});
}
));app.use(session({
secret: 'Whatever_You_Want',
saveUninitialized: true,
resave: false,
cookie: {
maxAge: 3600000
}
}))
app.use(passport.initialize());
app.use(passport.session());
In short, the following piece of code allows us to authenticate users and store them in a session, essential for building a website with persistant login-sessions. I encourage further reading on Passport.js and Express Sessions for deeper understanding.
Note the ‘YOUR_API_KEY’ where you will need to add your API Key from the previous step. ‘Whatever_You_Want’ is only a secret string for your Express Session, one that can be changed to anything you want.
Create routes
The last thing we need are the routes to handle requests from the front-end.
// Routes
app.get('/', (req, res) => {
res.send(req.user);
});app.get('/api/auth/steam', passport.authenticate('steam', {failureRedirect: '/'}), function (req, res) {
res.redirect('/')
});app.get('/api/auth/steam/return', passport.authenticate('steam', {failureRedirect: '/'}), function (req, res) {
res.redirect('/')
});
The ‘/’ route will only serve as a fallback that we redirect to after authentication.
The ‘/api/auth/steam’ route is the one we redirect users to from the frontend using a simple href:
<a href="http://localhost:3000/api/auth/steam">Sign in</a>Having added this code, start your server and navigate to said URL, and you should be met with the following familiar official steam page:
Now, sign in using your own Steam account and you will be redirected to the main page, localhost:3000/, where you will be met with the following:
This is just the body of ‘req.user’ (see the ‘/’ route, where you can see the res.send()). From this JSON data you can get the user’s Steamname, Avatar (in different sizes), SteamID64 etc.
This example only serves as a simple setup for you to build upon. For example, a real website will probably have a database where user information is stored, therefore you would need to manipulate the JSON data after authentication and insert the necessary information into your database of choice.
If you have any questions, please leave a comment and I will make sure to respond. If you the story provided any value, consider following me on Medium — they no longer pay creators with < 100 followers :(
