[{"data":1,"prerenderedAt":2021},["ShallowReactive",2],{"article-sign-in-through-steam-using-nodejs":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"image":11,"tags":12,"body":16,"_type":2015,"_id":2016,"_source":2017,"_file":2018,"_stem":2019,"_extension":2020},"\u002Farticles\u002Fsign-in-through-steam-using-nodejs","articles",false,"","Sign in through Steam using NodeJS","Set up “Sign in through Steam” on your website with NodeJS, express-session, and Doctor McKay’s steam-signin library.","2024-03-24","\u002Fimg\u002Farticles\u002Fsign-in-through-steam\u002Fsignin.jpg",[13,14,15],"Steam","NodeJS","Education",{"type":17,"children":18,"toc":2005},"root",[19,28,34,50,64,71,76,111,124,170,175,265,279,285,299,778,799,856,869,889,894,900,920,926,931,1111,1116,1122,1648,1660,1671,1676,1682,1807,1812,1818,1831,1881,1886,1894,1900,1913,1921,1927,1956,1962,1967,1987,1999],{"type":20,"tag":21,"props":22,"children":23},"element","p",{},[24],{"type":20,"tag":25,"props":26,"children":27},"img",{"alt":8,"src":11},[],{"type":20,"tag":21,"props":29,"children":30},{},[31],{"type":32,"value":33},"text","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 a 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.",{"type":20,"tag":21,"props":35,"children":36},{},[37,39,48],{"type":32,"value":38},"This article was updated after the ",{"type":20,"tag":40,"props":41,"children":45},"a",{"href":42,"rel":43},"https:\u002F\u002Fgithub.com\u002Fliamcurry\u002Fpassport-steam",[44],"nofollow",[46],{"type":32,"value":47},"passport-steam",{"type":32,"value":49}," library proved to have another vulnerability (which is not to be unexpected after 8 years of no maintenance).",{"type":20,"tag":21,"props":51,"children":52},{},[53,55,62],{"type":32,"value":54},"The solution herein utilizes a library built by the one and only ",{"type":20,"tag":40,"props":56,"children":59},{"href":57,"rel":58},"https:\u002F\u002Fgithub.com\u002FDoctorMcKay",[44],[60],{"type":32,"value":61},"Doctor McKay",{"type":32,"value":63},", a true hero within the community of Steam API development.",{"type":20,"tag":65,"props":66,"children":68},"h2",{"id":67},"npm-installs",[69],{"type":32,"value":70},"NPM Installs",{"type":20,"tag":21,"props":72,"children":73},{},[74],{"type":32,"value":75},"If you have not done it already, initialize a project in your folder of choice using a terminal:",{"type":20,"tag":77,"props":78,"children":82},"pre",{"className":79,"code":80,"language":81,"meta":7,"style":7},"language-shell shiki shiki-themes github-dark","npm init -y\n","shell",[83],{"type":20,"tag":84,"props":85,"children":86},"code",{"__ignoreMap":7},[87],{"type":20,"tag":88,"props":89,"children":92},"span",{"class":90,"line":91},"line",1,[93,99,105],{"type":20,"tag":88,"props":94,"children":96},{"style":95},"--shiki-default:#B392F0",[97],{"type":32,"value":98},"npm",{"type":20,"tag":88,"props":100,"children":102},{"style":101},"--shiki-default:#9ECBFF",[103],{"type":32,"value":104}," init",{"type":20,"tag":88,"props":106,"children":108},{"style":107},"--shiki-default:#79B8FF",[109],{"type":32,"value":110}," -y\n",{"type":20,"tag":21,"props":112,"children":113},{},[114,116,122],{"type":32,"value":115},"To utilize modules, add the following line somewhere inside your ",{"type":20,"tag":84,"props":117,"children":119},{"className":118},[],[120],{"type":32,"value":121},"package.json",{"type":32,"value":123}," file:",{"type":20,"tag":77,"props":125,"children":129},{"className":126,"code":127,"language":128,"meta":7,"style":7},"language-json shiki shiki-themes github-dark","{\n  \"type\": \"module\"\n}\n","json",[130],{"type":20,"tag":84,"props":131,"children":132},{"__ignoreMap":7},[133,142,161],{"type":20,"tag":88,"props":134,"children":135},{"class":90,"line":91},[136],{"type":20,"tag":88,"props":137,"children":139},{"style":138},"--shiki-default:#E1E4E8",[140],{"type":32,"value":141},"{\n",{"type":20,"tag":88,"props":143,"children":145},{"class":90,"line":144},2,[146,151,156],{"type":20,"tag":88,"props":147,"children":148},{"style":107},[149],{"type":32,"value":150},"  \"type\"",{"type":20,"tag":88,"props":152,"children":153},{"style":138},[154],{"type":32,"value":155},": ",{"type":20,"tag":88,"props":157,"children":158},{"style":101},[159],{"type":32,"value":160},"\"module\"\n",{"type":20,"tag":88,"props":162,"children":164},{"class":90,"line":163},3,[165],{"type":20,"tag":88,"props":166,"children":167},{"style":138},[168],{"type":32,"value":169},"}\n",{"type":20,"tag":21,"props":171,"children":172},{},[173],{"type":32,"value":174},"Afterwards, we are going to need some npm installs. The following installs are required:",{"type":20,"tag":77,"props":176,"children":178},{"className":79,"code":177,"language":81,"meta":7,"style":7},"npm install express\nnpm install express-session\nnpm install steam-signin\nnpm install dotenv\nnpm install axios\n",[179],{"type":20,"tag":84,"props":180,"children":181},{"__ignoreMap":7},[182,199,215,231,248],{"type":20,"tag":88,"props":183,"children":184},{"class":90,"line":91},[185,189,194],{"type":20,"tag":88,"props":186,"children":187},{"style":95},[188],{"type":32,"value":98},{"type":20,"tag":88,"props":190,"children":191},{"style":101},[192],{"type":32,"value":193}," install",{"type":20,"tag":88,"props":195,"children":196},{"style":101},[197],{"type":32,"value":198}," express\n",{"type":20,"tag":88,"props":200,"children":201},{"class":90,"line":144},[202,206,210],{"type":20,"tag":88,"props":203,"children":204},{"style":95},[205],{"type":32,"value":98},{"type":20,"tag":88,"props":207,"children":208},{"style":101},[209],{"type":32,"value":193},{"type":20,"tag":88,"props":211,"children":212},{"style":101},[213],{"type":32,"value":214}," express-session\n",{"type":20,"tag":88,"props":216,"children":217},{"class":90,"line":163},[218,222,226],{"type":20,"tag":88,"props":219,"children":220},{"style":95},[221],{"type":32,"value":98},{"type":20,"tag":88,"props":223,"children":224},{"style":101},[225],{"type":32,"value":193},{"type":20,"tag":88,"props":227,"children":228},{"style":101},[229],{"type":32,"value":230}," steam-signin\n",{"type":20,"tag":88,"props":232,"children":234},{"class":90,"line":233},4,[235,239,243],{"type":20,"tag":88,"props":236,"children":237},{"style":95},[238],{"type":32,"value":98},{"type":20,"tag":88,"props":240,"children":241},{"style":101},[242],{"type":32,"value":193},{"type":20,"tag":88,"props":244,"children":245},{"style":101},[246],{"type":32,"value":247}," dotenv\n",{"type":20,"tag":88,"props":249,"children":251},{"class":90,"line":250},5,[252,256,260],{"type":20,"tag":88,"props":253,"children":254},{"style":95},[255],{"type":32,"value":98},{"type":20,"tag":88,"props":257,"children":258},{"style":101},[259],{"type":32,"value":193},{"type":20,"tag":88,"props":261,"children":262},{"style":101},[263],{"type":32,"value":264}," axios\n",{"type":20,"tag":21,"props":266,"children":267},{},[268,270,277],{"type":32,"value":269},"Don’t have npm installed? Head over to ",{"type":20,"tag":40,"props":271,"children":274},{"href":272,"rel":273},"https:\u002F\u002Fnodejs.org",[44],[275],{"type":32,"value":276},"nodejs.org",{"type":32,"value":278}," and install it for your operating system of choice.",{"type":20,"tag":65,"props":280,"children":282},{"id":281},"start-building-the-server",[283],{"type":32,"value":284},"Start building the server",{"type":20,"tag":21,"props":286,"children":287},{},[288,290,297],{"type":32,"value":289},"Assuming we are working on a vanilla project, we will need to start with the necessary code to build a simple server. All the code can be found on ",{"type":20,"tag":40,"props":291,"children":294},{"href":292,"rel":293},"https:\u002F\u002Fgithub.com\u002Fkevalane\u002Fsign-in-through-steam",[44],[295],{"type":32,"value":296},"GitHub",{"type":32,"value":298},".",{"type":20,"tag":77,"props":300,"children":304},{"className":301,"code":302,"language":303,"meta":7,"style":7},"language-javascript shiki shiki-themes github-dark","import express from \"express\";\nimport session from \"express-session\";\nimport SteamSignIn from \"steam-signin\";\nimport dotenv from \"dotenv\";\ndotenv.config();\nimport axios from \"axios\";\n\nconst realm = process.env.API_URL;\nconst signIn = new SteamSignIn(realm)\n\nconst app = express();\n\napp.use(session({\n    secret: process.env.SECRET,\n    resave: false,\n    saveUninitialized: true,\n}));\n\nconst port = 3000;\n\napp.listen(port, () => {\n    console.log('Listening, port ' + port);\n});\n","javascript",[305],{"type":20,"tag":84,"props":306,"children":307},{"__ignoreMap":7},[308,337,362,387,412,430,456,466,499,531,539,565,573,602,621,639,657,666,674,700,708,736,769],{"type":20,"tag":88,"props":309,"children":310},{"class":90,"line":91},[311,317,322,327,332],{"type":20,"tag":88,"props":312,"children":314},{"style":313},"--shiki-default:#F97583",[315],{"type":32,"value":316},"import",{"type":20,"tag":88,"props":318,"children":319},{"style":138},[320],{"type":32,"value":321}," express ",{"type":20,"tag":88,"props":323,"children":324},{"style":313},[325],{"type":32,"value":326},"from",{"type":20,"tag":88,"props":328,"children":329},{"style":101},[330],{"type":32,"value":331}," \"express\"",{"type":20,"tag":88,"props":333,"children":334},{"style":138},[335],{"type":32,"value":336},";\n",{"type":20,"tag":88,"props":338,"children":339},{"class":90,"line":144},[340,344,349,353,358],{"type":20,"tag":88,"props":341,"children":342},{"style":313},[343],{"type":32,"value":316},{"type":20,"tag":88,"props":345,"children":346},{"style":138},[347],{"type":32,"value":348}," session ",{"type":20,"tag":88,"props":350,"children":351},{"style":313},[352],{"type":32,"value":326},{"type":20,"tag":88,"props":354,"children":355},{"style":101},[356],{"type":32,"value":357}," \"express-session\"",{"type":20,"tag":88,"props":359,"children":360},{"style":138},[361],{"type":32,"value":336},{"type":20,"tag":88,"props":363,"children":364},{"class":90,"line":163},[365,369,374,378,383],{"type":20,"tag":88,"props":366,"children":367},{"style":313},[368],{"type":32,"value":316},{"type":20,"tag":88,"props":370,"children":371},{"style":138},[372],{"type":32,"value":373}," SteamSignIn ",{"type":20,"tag":88,"props":375,"children":376},{"style":313},[377],{"type":32,"value":326},{"type":20,"tag":88,"props":379,"children":380},{"style":101},[381],{"type":32,"value":382}," \"steam-signin\"",{"type":20,"tag":88,"props":384,"children":385},{"style":138},[386],{"type":32,"value":336},{"type":20,"tag":88,"props":388,"children":389},{"class":90,"line":233},[390,394,399,403,408],{"type":20,"tag":88,"props":391,"children":392},{"style":313},[393],{"type":32,"value":316},{"type":20,"tag":88,"props":395,"children":396},{"style":138},[397],{"type":32,"value":398}," dotenv ",{"type":20,"tag":88,"props":400,"children":401},{"style":313},[402],{"type":32,"value":326},{"type":20,"tag":88,"props":404,"children":405},{"style":101},[406],{"type":32,"value":407}," \"dotenv\"",{"type":20,"tag":88,"props":409,"children":410},{"style":138},[411],{"type":32,"value":336},{"type":20,"tag":88,"props":413,"children":414},{"class":90,"line":250},[415,420,425],{"type":20,"tag":88,"props":416,"children":417},{"style":138},[418],{"type":32,"value":419},"dotenv.",{"type":20,"tag":88,"props":421,"children":422},{"style":95},[423],{"type":32,"value":424},"config",{"type":20,"tag":88,"props":426,"children":427},{"style":138},[428],{"type":32,"value":429},"();\n",{"type":20,"tag":88,"props":431,"children":433},{"class":90,"line":432},6,[434,438,443,447,452],{"type":20,"tag":88,"props":435,"children":436},{"style":313},[437],{"type":32,"value":316},{"type":20,"tag":88,"props":439,"children":440},{"style":138},[441],{"type":32,"value":442}," axios ",{"type":20,"tag":88,"props":444,"children":445},{"style":313},[446],{"type":32,"value":326},{"type":20,"tag":88,"props":448,"children":449},{"style":101},[450],{"type":32,"value":451}," \"axios\"",{"type":20,"tag":88,"props":453,"children":454},{"style":138},[455],{"type":32,"value":336},{"type":20,"tag":88,"props":457,"children":459},{"class":90,"line":458},7,[460],{"type":20,"tag":88,"props":461,"children":463},{"emptyLinePlaceholder":462},true,[464],{"type":32,"value":465},"\n",{"type":20,"tag":88,"props":467,"children":469},{"class":90,"line":468},8,[470,475,480,485,490,495],{"type":20,"tag":88,"props":471,"children":472},{"style":313},[473],{"type":32,"value":474},"const",{"type":20,"tag":88,"props":476,"children":477},{"style":107},[478],{"type":32,"value":479}," realm",{"type":20,"tag":88,"props":481,"children":482},{"style":313},[483],{"type":32,"value":484}," =",{"type":20,"tag":88,"props":486,"children":487},{"style":138},[488],{"type":32,"value":489}," process.env.",{"type":20,"tag":88,"props":491,"children":492},{"style":107},[493],{"type":32,"value":494},"API_URL",{"type":20,"tag":88,"props":496,"children":497},{"style":138},[498],{"type":32,"value":336},{"type":20,"tag":88,"props":500,"children":502},{"class":90,"line":501},9,[503,507,512,516,521,526],{"type":20,"tag":88,"props":504,"children":505},{"style":313},[506],{"type":32,"value":474},{"type":20,"tag":88,"props":508,"children":509},{"style":107},[510],{"type":32,"value":511}," signIn",{"type":20,"tag":88,"props":513,"children":514},{"style":313},[515],{"type":32,"value":484},{"type":20,"tag":88,"props":517,"children":518},{"style":313},[519],{"type":32,"value":520}," new",{"type":20,"tag":88,"props":522,"children":523},{"style":95},[524],{"type":32,"value":525}," SteamSignIn",{"type":20,"tag":88,"props":527,"children":528},{"style":138},[529],{"type":32,"value":530},"(realm)\n",{"type":20,"tag":88,"props":532,"children":534},{"class":90,"line":533},10,[535],{"type":20,"tag":88,"props":536,"children":537},{"emptyLinePlaceholder":462},[538],{"type":32,"value":465},{"type":20,"tag":88,"props":540,"children":542},{"class":90,"line":541},11,[543,547,552,556,561],{"type":20,"tag":88,"props":544,"children":545},{"style":313},[546],{"type":32,"value":474},{"type":20,"tag":88,"props":548,"children":549},{"style":107},[550],{"type":32,"value":551}," app",{"type":20,"tag":88,"props":553,"children":554},{"style":313},[555],{"type":32,"value":484},{"type":20,"tag":88,"props":557,"children":558},{"style":95},[559],{"type":32,"value":560}," express",{"type":20,"tag":88,"props":562,"children":563},{"style":138},[564],{"type":32,"value":429},{"type":20,"tag":88,"props":566,"children":568},{"class":90,"line":567},12,[569],{"type":20,"tag":88,"props":570,"children":571},{"emptyLinePlaceholder":462},[572],{"type":32,"value":465},{"type":20,"tag":88,"props":574,"children":576},{"class":90,"line":575},13,[577,582,587,592,597],{"type":20,"tag":88,"props":578,"children":579},{"style":138},[580],{"type":32,"value":581},"app.",{"type":20,"tag":88,"props":583,"children":584},{"style":95},[585],{"type":32,"value":586},"use",{"type":20,"tag":88,"props":588,"children":589},{"style":138},[590],{"type":32,"value":591},"(",{"type":20,"tag":88,"props":593,"children":594},{"style":95},[595],{"type":32,"value":596},"session",{"type":20,"tag":88,"props":598,"children":599},{"style":138},[600],{"type":32,"value":601},"({\n",{"type":20,"tag":88,"props":603,"children":605},{"class":90,"line":604},14,[606,611,616],{"type":20,"tag":88,"props":607,"children":608},{"style":138},[609],{"type":32,"value":610},"    secret: process.env.",{"type":20,"tag":88,"props":612,"children":613},{"style":107},[614],{"type":32,"value":615},"SECRET",{"type":20,"tag":88,"props":617,"children":618},{"style":138},[619],{"type":32,"value":620},",\n",{"type":20,"tag":88,"props":622,"children":624},{"class":90,"line":623},15,[625,630,635],{"type":20,"tag":88,"props":626,"children":627},{"style":138},[628],{"type":32,"value":629},"    resave: ",{"type":20,"tag":88,"props":631,"children":632},{"style":107},[633],{"type":32,"value":634},"false",{"type":20,"tag":88,"props":636,"children":637},{"style":138},[638],{"type":32,"value":620},{"type":20,"tag":88,"props":640,"children":642},{"class":90,"line":641},16,[643,648,653],{"type":20,"tag":88,"props":644,"children":645},{"style":138},[646],{"type":32,"value":647},"    saveUninitialized: ",{"type":20,"tag":88,"props":649,"children":650},{"style":107},[651],{"type":32,"value":652},"true",{"type":20,"tag":88,"props":654,"children":655},{"style":138},[656],{"type":32,"value":620},{"type":20,"tag":88,"props":658,"children":660},{"class":90,"line":659},17,[661],{"type":20,"tag":88,"props":662,"children":663},{"style":138},[664],{"type":32,"value":665},"}));\n",{"type":20,"tag":88,"props":667,"children":669},{"class":90,"line":668},18,[670],{"type":20,"tag":88,"props":671,"children":672},{"emptyLinePlaceholder":462},[673],{"type":32,"value":465},{"type":20,"tag":88,"props":675,"children":677},{"class":90,"line":676},19,[678,682,687,691,696],{"type":20,"tag":88,"props":679,"children":680},{"style":313},[681],{"type":32,"value":474},{"type":20,"tag":88,"props":683,"children":684},{"style":107},[685],{"type":32,"value":686}," port",{"type":20,"tag":88,"props":688,"children":689},{"style":313},[690],{"type":32,"value":484},{"type":20,"tag":88,"props":692,"children":693},{"style":107},[694],{"type":32,"value":695}," 3000",{"type":20,"tag":88,"props":697,"children":698},{"style":138},[699],{"type":32,"value":336},{"type":20,"tag":88,"props":701,"children":703},{"class":90,"line":702},20,[704],{"type":20,"tag":88,"props":705,"children":706},{"emptyLinePlaceholder":462},[707],{"type":32,"value":465},{"type":20,"tag":88,"props":709,"children":711},{"class":90,"line":710},21,[712,716,721,726,731],{"type":20,"tag":88,"props":713,"children":714},{"style":138},[715],{"type":32,"value":581},{"type":20,"tag":88,"props":717,"children":718},{"style":95},[719],{"type":32,"value":720},"listen",{"type":20,"tag":88,"props":722,"children":723},{"style":138},[724],{"type":32,"value":725},"(port, () ",{"type":20,"tag":88,"props":727,"children":728},{"style":313},[729],{"type":32,"value":730},"=>",{"type":20,"tag":88,"props":732,"children":733},{"style":138},[734],{"type":32,"value":735}," {\n",{"type":20,"tag":88,"props":737,"children":739},{"class":90,"line":738},22,[740,745,750,754,759,764],{"type":20,"tag":88,"props":741,"children":742},{"style":138},[743],{"type":32,"value":744},"    console.",{"type":20,"tag":88,"props":746,"children":747},{"style":95},[748],{"type":32,"value":749},"log",{"type":20,"tag":88,"props":751,"children":752},{"style":138},[753],{"type":32,"value":591},{"type":20,"tag":88,"props":755,"children":756},{"style":101},[757],{"type":32,"value":758},"'Listening, port '",{"type":20,"tag":88,"props":760,"children":761},{"style":313},[762],{"type":32,"value":763}," +",{"type":20,"tag":88,"props":765,"children":766},{"style":138},[767],{"type":32,"value":768}," port);\n",{"type":20,"tag":88,"props":770,"children":772},{"class":90,"line":771},23,[773],{"type":20,"tag":88,"props":774,"children":775},{"style":138},[776],{"type":32,"value":777},"});\n",{"type":20,"tag":21,"props":779,"children":780},{},[781,783,789,791,797],{"type":32,"value":782},"We will also need to create a ",{"type":20,"tag":84,"props":784,"children":786},{"className":785},[],[787],{"type":32,"value":788},".env",{"type":32,"value":790}," file (you can rename the ",{"type":20,"tag":84,"props":792,"children":794},{"className":793},[],[795],{"type":32,"value":796},".env.example",{"type":32,"value":798}," if you are following along within the GitHub repository):",{"type":20,"tag":77,"props":800,"children":802},{"className":79,"code":801,"language":81,"meta":7,"style":7},"SECRET=whatever-you-want\nAPI_URL=http:\u002F\u002Flocalhost:3000\nSTEAM_API_KEY=your-steam-api-key\n",[803],{"type":20,"tag":84,"props":804,"children":805},{"__ignoreMap":7},[806,823,839],{"type":20,"tag":88,"props":807,"children":808},{"class":90,"line":91},[809,813,818],{"type":20,"tag":88,"props":810,"children":811},{"style":138},[812],{"type":32,"value":615},{"type":20,"tag":88,"props":814,"children":815},{"style":313},[816],{"type":32,"value":817},"=",{"type":20,"tag":88,"props":819,"children":820},{"style":101},[821],{"type":32,"value":822},"whatever-you-want\n",{"type":20,"tag":88,"props":824,"children":825},{"class":90,"line":144},[826,830,834],{"type":20,"tag":88,"props":827,"children":828},{"style":138},[829],{"type":32,"value":494},{"type":20,"tag":88,"props":831,"children":832},{"style":313},[833],{"type":32,"value":817},{"type":20,"tag":88,"props":835,"children":836},{"style":101},[837],{"type":32,"value":838},"http:\u002F\u002Flocalhost:3000\n",{"type":20,"tag":88,"props":840,"children":841},{"class":90,"line":163},[842,847,851],{"type":20,"tag":88,"props":843,"children":844},{"style":138},[845],{"type":32,"value":846},"STEAM_API_KEY",{"type":20,"tag":88,"props":848,"children":849},{"style":313},[850],{"type":32,"value":817},{"type":20,"tag":88,"props":852,"children":853},{"style":101},[854],{"type":32,"value":855},"your-steam-api-key\n",{"type":20,"tag":21,"props":857,"children":858},{},[859,861,867],{"type":32,"value":860},"You can run this code using (given that you named your application file ",{"type":20,"tag":84,"props":862,"children":864},{"className":863},[],[865],{"type":32,"value":866},"index.js",{"type":32,"value":868},"):",{"type":20,"tag":77,"props":870,"children":872},{"className":79,"code":871,"language":81,"meta":7,"style":7},"node index.js\n",[873],{"type":20,"tag":84,"props":874,"children":875},{"__ignoreMap":7},[876],{"type":20,"tag":88,"props":877,"children":878},{"class":90,"line":91},[879,884],{"type":20,"tag":88,"props":880,"children":881},{"style":95},[882],{"type":32,"value":883},"node",{"type":20,"tag":88,"props":885,"children":886},{"style":101},[887],{"type":32,"value":888}," index.js\n",{"type":20,"tag":21,"props":890,"children":891},{},[892],{"type":32,"value":893},"If you get any errors at this point, make sure that all the packages are installed correctly.",{"type":20,"tag":65,"props":895,"children":897},{"id":896},"set-steam-api-key",[898],{"type":32,"value":899},"Set Steam API key",{"type":20,"tag":21,"props":901,"children":902},{},[903,905,911,913,918],{"type":32,"value":904},"To obtain player details (like account name and avatar), you will need to set up an API key for your Steam account. I wrote another blog post that is available ",{"type":20,"tag":40,"props":906,"children":908},{"href":907},"\u002Farticles\u002Fhow-to-obtain-your-steam-api-key",[909],{"type":32,"value":910},"here",{"type":32,"value":912},", taking you through all the necessary steps. Add it to the ",{"type":20,"tag":84,"props":914,"children":916},{"className":915},[],[917],{"type":32,"value":788},{"type":32,"value":919}," file above.",{"type":20,"tag":65,"props":921,"children":923},{"id":922},"creating-the-primary-route",[924],{"type":32,"value":925},"Creating the primary route",{"type":20,"tag":21,"props":927,"children":928},{},[929],{"type":32,"value":930},"To be able to access the sign-in functionality, we need to expose a few routes. Firstly, we will build the route that users will get redirected to from the front-end.",{"type":20,"tag":77,"props":932,"children":934},{"className":301,"code":933,"language":303,"meta":7,"style":7},"app.get('\u002Fapi\u002Fv1\u002Fauth\u002Fsteam', (req, res) => {\n    res.statusCode = 302;\n    res.setHeader(\n        \"Location\",\n        signIn.getUrl(process.env.API_URL + '\u002Fapi\u002Fv1\u002Fauth\u002Fsteam\u002Freturn')\n    )\n    res.end();\n});\n",[935],{"type":20,"tag":84,"props":936,"children":937},{"__ignoreMap":7},[938,993,1014,1032,1044,1080,1088,1104],{"type":20,"tag":88,"props":939,"children":940},{"class":90,"line":91},[941,945,950,954,959,964,970,975,980,985,989],{"type":20,"tag":88,"props":942,"children":943},{"style":138},[944],{"type":32,"value":581},{"type":20,"tag":88,"props":946,"children":947},{"style":95},[948],{"type":32,"value":949},"get",{"type":20,"tag":88,"props":951,"children":952},{"style":138},[953],{"type":32,"value":591},{"type":20,"tag":88,"props":955,"children":956},{"style":101},[957],{"type":32,"value":958},"'\u002Fapi\u002Fv1\u002Fauth\u002Fsteam'",{"type":20,"tag":88,"props":960,"children":961},{"style":138},[962],{"type":32,"value":963},", (",{"type":20,"tag":88,"props":965,"children":967},{"style":966},"--shiki-default:#FFAB70",[968],{"type":32,"value":969},"req",{"type":20,"tag":88,"props":971,"children":972},{"style":138},[973],{"type":32,"value":974},", ",{"type":20,"tag":88,"props":976,"children":977},{"style":966},[978],{"type":32,"value":979},"res",{"type":20,"tag":88,"props":981,"children":982},{"style":138},[983],{"type":32,"value":984},") ",{"type":20,"tag":88,"props":986,"children":987},{"style":313},[988],{"type":32,"value":730},{"type":20,"tag":88,"props":990,"children":991},{"style":138},[992],{"type":32,"value":735},{"type":20,"tag":88,"props":994,"children":995},{"class":90,"line":144},[996,1001,1005,1010],{"type":20,"tag":88,"props":997,"children":998},{"style":138},[999],{"type":32,"value":1000},"    res.statusCode ",{"type":20,"tag":88,"props":1002,"children":1003},{"style":313},[1004],{"type":32,"value":817},{"type":20,"tag":88,"props":1006,"children":1007},{"style":107},[1008],{"type":32,"value":1009}," 302",{"type":20,"tag":88,"props":1011,"children":1012},{"style":138},[1013],{"type":32,"value":336},{"type":20,"tag":88,"props":1015,"children":1016},{"class":90,"line":163},[1017,1022,1027],{"type":20,"tag":88,"props":1018,"children":1019},{"style":138},[1020],{"type":32,"value":1021},"    res.",{"type":20,"tag":88,"props":1023,"children":1024},{"style":95},[1025],{"type":32,"value":1026},"setHeader",{"type":20,"tag":88,"props":1028,"children":1029},{"style":138},[1030],{"type":32,"value":1031},"(\n",{"type":20,"tag":88,"props":1033,"children":1034},{"class":90,"line":233},[1035,1040],{"type":20,"tag":88,"props":1036,"children":1037},{"style":101},[1038],{"type":32,"value":1039},"        \"Location\"",{"type":20,"tag":88,"props":1041,"children":1042},{"style":138},[1043],{"type":32,"value":620},{"type":20,"tag":88,"props":1045,"children":1046},{"class":90,"line":250},[1047,1052,1057,1062,1066,1070,1075],{"type":20,"tag":88,"props":1048,"children":1049},{"style":138},[1050],{"type":32,"value":1051},"        signIn.",{"type":20,"tag":88,"props":1053,"children":1054},{"style":95},[1055],{"type":32,"value":1056},"getUrl",{"type":20,"tag":88,"props":1058,"children":1059},{"style":138},[1060],{"type":32,"value":1061},"(process.env.",{"type":20,"tag":88,"props":1063,"children":1064},{"style":107},[1065],{"type":32,"value":494},{"type":20,"tag":88,"props":1067,"children":1068},{"style":313},[1069],{"type":32,"value":763},{"type":20,"tag":88,"props":1071,"children":1072},{"style":101},[1073],{"type":32,"value":1074}," '\u002Fapi\u002Fv1\u002Fauth\u002Fsteam\u002Freturn'",{"type":20,"tag":88,"props":1076,"children":1077},{"style":138},[1078],{"type":32,"value":1079},")\n",{"type":20,"tag":88,"props":1081,"children":1082},{"class":90,"line":432},[1083],{"type":20,"tag":88,"props":1084,"children":1085},{"style":138},[1086],{"type":32,"value":1087},"    )\n",{"type":20,"tag":88,"props":1089,"children":1090},{"class":90,"line":458},[1091,1095,1100],{"type":20,"tag":88,"props":1092,"children":1093},{"style":138},[1094],{"type":32,"value":1021},{"type":20,"tag":88,"props":1096,"children":1097},{"style":95},[1098],{"type":32,"value":1099},"end",{"type":20,"tag":88,"props":1101,"children":1102},{"style":138},[1103],{"type":32,"value":429},{"type":20,"tag":88,"props":1105,"children":1106},{"class":90,"line":468},[1107],{"type":20,"tag":88,"props":1108,"children":1109},{"style":138},[1110],{"type":32,"value":777},{"type":20,"tag":21,"props":1112,"children":1113},{},[1114],{"type":32,"value":1115},"This code initializes the sign in, and then redirects to our own route, which we will build next.",{"type":20,"tag":65,"props":1117,"children":1119},{"id":1118},"build-return-route",[1120],{"type":32,"value":1121},"Build return route",{"type":20,"tag":77,"props":1123,"children":1125},{"className":301,"code":1124,"language":303,"meta":7,"style":7},"app.get('\u002Fapi\u002Fv1\u002Fauth\u002Fsteam\u002Freturn', async (req, res) => {\n    res.setHeader('Content-Type', 'text\u002Fplain');\n    try {\n        let steamId = await signIn.verifyLogin(req.url);\n\n        const steamid64 = steamId.getSteamID64();\n        const response = await axios.get(`https:\u002F\u002Fapi.steampowered.com\u002FISteamUser\u002FGetPlayerSummaries\u002Fv0002\u002F?key=${process.env.STEAM_API_KEY}&steamids=${steamid64}`)\n        const { avatarfull, personaname } = response.data.response.players[0];\n\n        req.session.user = {\n            steamid64,\n            avatarfull,\n            personaname,\n        }\n        await req.session.save()\n\n        res.redirect(process.env.API_URL);\n    } catch (error) {\n        console.error(error);\n        return res.status(500).send('There was an error signing in.');\n    }\n});\n",[1126],{"type":20,"tag":84,"props":1127,"children":1128},{"__ignoreMap":7},[1129,1187,1221,1233,1270,1277,1308,1387,1437,1444,1460,1468,1476,1484,1492,1515,1522,1547,1565,1583,1633,1641],{"type":20,"tag":88,"props":1130,"children":1131},{"class":90,"line":91},[1132,1136,1140,1144,1149,1153,1158,1163,1167,1171,1175,1179,1183],{"type":20,"tag":88,"props":1133,"children":1134},{"style":138},[1135],{"type":32,"value":581},{"type":20,"tag":88,"props":1137,"children":1138},{"style":95},[1139],{"type":32,"value":949},{"type":20,"tag":88,"props":1141,"children":1142},{"style":138},[1143],{"type":32,"value":591},{"type":20,"tag":88,"props":1145,"children":1146},{"style":101},[1147],{"type":32,"value":1148},"'\u002Fapi\u002Fv1\u002Fauth\u002Fsteam\u002Freturn'",{"type":20,"tag":88,"props":1150,"children":1151},{"style":138},[1152],{"type":32,"value":974},{"type":20,"tag":88,"props":1154,"children":1155},{"style":313},[1156],{"type":32,"value":1157},"async",{"type":20,"tag":88,"props":1159,"children":1160},{"style":138},[1161],{"type":32,"value":1162}," (",{"type":20,"tag":88,"props":1164,"children":1165},{"style":966},[1166],{"type":32,"value":969},{"type":20,"tag":88,"props":1168,"children":1169},{"style":138},[1170],{"type":32,"value":974},{"type":20,"tag":88,"props":1172,"children":1173},{"style":966},[1174],{"type":32,"value":979},{"type":20,"tag":88,"props":1176,"children":1177},{"style":138},[1178],{"type":32,"value":984},{"type":20,"tag":88,"props":1180,"children":1181},{"style":313},[1182],{"type":32,"value":730},{"type":20,"tag":88,"props":1184,"children":1185},{"style":138},[1186],{"type":32,"value":735},{"type":20,"tag":88,"props":1188,"children":1189},{"class":90,"line":144},[1190,1194,1198,1202,1207,1211,1216],{"type":20,"tag":88,"props":1191,"children":1192},{"style":138},[1193],{"type":32,"value":1021},{"type":20,"tag":88,"props":1195,"children":1196},{"style":95},[1197],{"type":32,"value":1026},{"type":20,"tag":88,"props":1199,"children":1200},{"style":138},[1201],{"type":32,"value":591},{"type":20,"tag":88,"props":1203,"children":1204},{"style":101},[1205],{"type":32,"value":1206},"'Content-Type'",{"type":20,"tag":88,"props":1208,"children":1209},{"style":138},[1210],{"type":32,"value":974},{"type":20,"tag":88,"props":1212,"children":1213},{"style":101},[1214],{"type":32,"value":1215},"'text\u002Fplain'",{"type":20,"tag":88,"props":1217,"children":1218},{"style":138},[1219],{"type":32,"value":1220},");\n",{"type":20,"tag":88,"props":1222,"children":1223},{"class":90,"line":163},[1224,1229],{"type":20,"tag":88,"props":1225,"children":1226},{"style":313},[1227],{"type":32,"value":1228},"    try",{"type":20,"tag":88,"props":1230,"children":1231},{"style":138},[1232],{"type":32,"value":735},{"type":20,"tag":88,"props":1234,"children":1235},{"class":90,"line":233},[1236,1241,1246,1250,1255,1260,1265],{"type":20,"tag":88,"props":1237,"children":1238},{"style":313},[1239],{"type":32,"value":1240},"        let",{"type":20,"tag":88,"props":1242,"children":1243},{"style":138},[1244],{"type":32,"value":1245}," steamId ",{"type":20,"tag":88,"props":1247,"children":1248},{"style":313},[1249],{"type":32,"value":817},{"type":20,"tag":88,"props":1251,"children":1252},{"style":313},[1253],{"type":32,"value":1254}," await",{"type":20,"tag":88,"props":1256,"children":1257},{"style":138},[1258],{"type":32,"value":1259}," signIn.",{"type":20,"tag":88,"props":1261,"children":1262},{"style":95},[1263],{"type":32,"value":1264},"verifyLogin",{"type":20,"tag":88,"props":1266,"children":1267},{"style":138},[1268],{"type":32,"value":1269},"(req.url);\n",{"type":20,"tag":88,"props":1271,"children":1272},{"class":90,"line":250},[1273],{"type":20,"tag":88,"props":1274,"children":1275},{"emptyLinePlaceholder":462},[1276],{"type":32,"value":465},{"type":20,"tag":88,"props":1278,"children":1279},{"class":90,"line":432},[1280,1285,1290,1294,1299,1304],{"type":20,"tag":88,"props":1281,"children":1282},{"style":313},[1283],{"type":32,"value":1284},"        const",{"type":20,"tag":88,"props":1286,"children":1287},{"style":107},[1288],{"type":32,"value":1289}," steamid64",{"type":20,"tag":88,"props":1291,"children":1292},{"style":313},[1293],{"type":32,"value":484},{"type":20,"tag":88,"props":1295,"children":1296},{"style":138},[1297],{"type":32,"value":1298}," steamId.",{"type":20,"tag":88,"props":1300,"children":1301},{"style":95},[1302],{"type":32,"value":1303},"getSteamID64",{"type":20,"tag":88,"props":1305,"children":1306},{"style":138},[1307],{"type":32,"value":429},{"type":20,"tag":88,"props":1309,"children":1310},{"class":90,"line":458},[1311,1315,1320,1324,1328,1333,1337,1341,1346,1351,1355,1360,1364,1368,1373,1378,1383],{"type":20,"tag":88,"props":1312,"children":1313},{"style":313},[1314],{"type":32,"value":1284},{"type":20,"tag":88,"props":1316,"children":1317},{"style":107},[1318],{"type":32,"value":1319}," response",{"type":20,"tag":88,"props":1321,"children":1322},{"style":313},[1323],{"type":32,"value":484},{"type":20,"tag":88,"props":1325,"children":1326},{"style":313},[1327],{"type":32,"value":1254},{"type":20,"tag":88,"props":1329,"children":1330},{"style":138},[1331],{"type":32,"value":1332}," axios.",{"type":20,"tag":88,"props":1334,"children":1335},{"style":95},[1336],{"type":32,"value":949},{"type":20,"tag":88,"props":1338,"children":1339},{"style":138},[1340],{"type":32,"value":591},{"type":20,"tag":88,"props":1342,"children":1343},{"style":101},[1344],{"type":32,"value":1345},"`https:\u002F\u002Fapi.steampowered.com\u002FISteamUser\u002FGetPlayerSummaries\u002Fv0002\u002F?key=${",{"type":20,"tag":88,"props":1347,"children":1348},{"style":138},[1349],{"type":32,"value":1350},"process",{"type":20,"tag":88,"props":1352,"children":1353},{"style":101},[1354],{"type":32,"value":298},{"type":20,"tag":88,"props":1356,"children":1357},{"style":138},[1358],{"type":32,"value":1359},"env",{"type":20,"tag":88,"props":1361,"children":1362},{"style":101},[1363],{"type":32,"value":298},{"type":20,"tag":88,"props":1365,"children":1366},{"style":107},[1367],{"type":32,"value":846},{"type":20,"tag":88,"props":1369,"children":1370},{"style":101},[1371],{"type":32,"value":1372},"}&steamids=${",{"type":20,"tag":88,"props":1374,"children":1375},{"style":138},[1376],{"type":32,"value":1377},"steamid64",{"type":20,"tag":88,"props":1379,"children":1380},{"style":101},[1381],{"type":32,"value":1382},"}`",{"type":20,"tag":88,"props":1384,"children":1385},{"style":138},[1386],{"type":32,"value":1079},{"type":20,"tag":88,"props":1388,"children":1389},{"class":90,"line":468},[1390,1394,1399,1404,1408,1413,1418,1422,1427,1432],{"type":20,"tag":88,"props":1391,"children":1392},{"style":313},[1393],{"type":32,"value":1284},{"type":20,"tag":88,"props":1395,"children":1396},{"style":138},[1397],{"type":32,"value":1398}," { ",{"type":20,"tag":88,"props":1400,"children":1401},{"style":107},[1402],{"type":32,"value":1403},"avatarfull",{"type":20,"tag":88,"props":1405,"children":1406},{"style":138},[1407],{"type":32,"value":974},{"type":20,"tag":88,"props":1409,"children":1410},{"style":107},[1411],{"type":32,"value":1412},"personaname",{"type":20,"tag":88,"props":1414,"children":1415},{"style":138},[1416],{"type":32,"value":1417}," } ",{"type":20,"tag":88,"props":1419,"children":1420},{"style":313},[1421],{"type":32,"value":817},{"type":20,"tag":88,"props":1423,"children":1424},{"style":138},[1425],{"type":32,"value":1426}," response.data.response.players[",{"type":20,"tag":88,"props":1428,"children":1429},{"style":107},[1430],{"type":32,"value":1431},"0",{"type":20,"tag":88,"props":1433,"children":1434},{"style":138},[1435],{"type":32,"value":1436},"];\n",{"type":20,"tag":88,"props":1438,"children":1439},{"class":90,"line":501},[1440],{"type":20,"tag":88,"props":1441,"children":1442},{"emptyLinePlaceholder":462},[1443],{"type":32,"value":465},{"type":20,"tag":88,"props":1445,"children":1446},{"class":90,"line":533},[1447,1452,1456],{"type":20,"tag":88,"props":1448,"children":1449},{"style":138},[1450],{"type":32,"value":1451},"        req.session.user ",{"type":20,"tag":88,"props":1453,"children":1454},{"style":313},[1455],{"type":32,"value":817},{"type":20,"tag":88,"props":1457,"children":1458},{"style":138},[1459],{"type":32,"value":735},{"type":20,"tag":88,"props":1461,"children":1462},{"class":90,"line":541},[1463],{"type":20,"tag":88,"props":1464,"children":1465},{"style":138},[1466],{"type":32,"value":1467},"            steamid64,\n",{"type":20,"tag":88,"props":1469,"children":1470},{"class":90,"line":567},[1471],{"type":20,"tag":88,"props":1472,"children":1473},{"style":138},[1474],{"type":32,"value":1475},"            avatarfull,\n",{"type":20,"tag":88,"props":1477,"children":1478},{"class":90,"line":575},[1479],{"type":20,"tag":88,"props":1480,"children":1481},{"style":138},[1482],{"type":32,"value":1483},"            personaname,\n",{"type":20,"tag":88,"props":1485,"children":1486},{"class":90,"line":604},[1487],{"type":20,"tag":88,"props":1488,"children":1489},{"style":138},[1490],{"type":32,"value":1491},"        }\n",{"type":20,"tag":88,"props":1493,"children":1494},{"class":90,"line":623},[1495,1500,1505,1510],{"type":20,"tag":88,"props":1496,"children":1497},{"style":313},[1498],{"type":32,"value":1499},"        await",{"type":20,"tag":88,"props":1501,"children":1502},{"style":138},[1503],{"type":32,"value":1504}," req.session.",{"type":20,"tag":88,"props":1506,"children":1507},{"style":95},[1508],{"type":32,"value":1509},"save",{"type":20,"tag":88,"props":1511,"children":1512},{"style":138},[1513],{"type":32,"value":1514},"()\n",{"type":20,"tag":88,"props":1516,"children":1517},{"class":90,"line":641},[1518],{"type":20,"tag":88,"props":1519,"children":1520},{"emptyLinePlaceholder":462},[1521],{"type":32,"value":465},{"type":20,"tag":88,"props":1523,"children":1524},{"class":90,"line":659},[1525,1530,1535,1539,1543],{"type":20,"tag":88,"props":1526,"children":1527},{"style":138},[1528],{"type":32,"value":1529},"        res.",{"type":20,"tag":88,"props":1531,"children":1532},{"style":95},[1533],{"type":32,"value":1534},"redirect",{"type":20,"tag":88,"props":1536,"children":1537},{"style":138},[1538],{"type":32,"value":1061},{"type":20,"tag":88,"props":1540,"children":1541},{"style":107},[1542],{"type":32,"value":494},{"type":20,"tag":88,"props":1544,"children":1545},{"style":138},[1546],{"type":32,"value":1220},{"type":20,"tag":88,"props":1548,"children":1549},{"class":90,"line":668},[1550,1555,1560],{"type":20,"tag":88,"props":1551,"children":1552},{"style":138},[1553],{"type":32,"value":1554},"    } ",{"type":20,"tag":88,"props":1556,"children":1557},{"style":313},[1558],{"type":32,"value":1559},"catch",{"type":20,"tag":88,"props":1561,"children":1562},{"style":138},[1563],{"type":32,"value":1564}," (error) {\n",{"type":20,"tag":88,"props":1566,"children":1567},{"class":90,"line":676},[1568,1573,1578],{"type":20,"tag":88,"props":1569,"children":1570},{"style":138},[1571],{"type":32,"value":1572},"        console.",{"type":20,"tag":88,"props":1574,"children":1575},{"style":95},[1576],{"type":32,"value":1577},"error",{"type":20,"tag":88,"props":1579,"children":1580},{"style":138},[1581],{"type":32,"value":1582},"(error);\n",{"type":20,"tag":88,"props":1584,"children":1585},{"class":90,"line":702},[1586,1591,1596,1601,1605,1610,1615,1620,1624,1629],{"type":20,"tag":88,"props":1587,"children":1588},{"style":313},[1589],{"type":32,"value":1590},"        return",{"type":20,"tag":88,"props":1592,"children":1593},{"style":138},[1594],{"type":32,"value":1595}," res.",{"type":20,"tag":88,"props":1597,"children":1598},{"style":95},[1599],{"type":32,"value":1600},"status",{"type":20,"tag":88,"props":1602,"children":1603},{"style":138},[1604],{"type":32,"value":591},{"type":20,"tag":88,"props":1606,"children":1607},{"style":107},[1608],{"type":32,"value":1609},"500",{"type":20,"tag":88,"props":1611,"children":1612},{"style":138},[1613],{"type":32,"value":1614},").",{"type":20,"tag":88,"props":1616,"children":1617},{"style":95},[1618],{"type":32,"value":1619},"send",{"type":20,"tag":88,"props":1621,"children":1622},{"style":138},[1623],{"type":32,"value":591},{"type":20,"tag":88,"props":1625,"children":1626},{"style":101},[1627],{"type":32,"value":1628},"'There was an error signing in.'",{"type":20,"tag":88,"props":1630,"children":1631},{"style":138},[1632],{"type":32,"value":1220},{"type":20,"tag":88,"props":1634,"children":1635},{"class":90,"line":710},[1636],{"type":20,"tag":88,"props":1637,"children":1638},{"style":138},[1639],{"type":32,"value":1640},"    }\n",{"type":20,"tag":88,"props":1642,"children":1643},{"class":90,"line":738},[1644],{"type":20,"tag":88,"props":1645,"children":1646},{"style":138},[1647],{"type":32,"value":777},{"type":20,"tag":21,"props":1649,"children":1650},{},[1651,1653,1659],{"type":32,"value":1652},"A lot going on here. The important section (that verifies the sign in) is the line where we get the authenticated user's ",{"type":20,"tag":84,"props":1654,"children":1656},{"className":1655},[],[1657],{"type":32,"value":1658},"steamId",{"type":32,"value":298},{"type":20,"tag":21,"props":1661,"children":1662},{},[1663,1665,1670],{"type":32,"value":1664},"After this, we fetch typical info that applications display of the signed-in user, namely their Steam profile avatar, and their display name (",{"type":20,"tag":84,"props":1666,"children":1668},{"className":1667},[],[1669],{"type":32,"value":1412},{"type":32,"value":1614},{"type":20,"tag":21,"props":1672,"children":1673},{},[1674],{"type":32,"value":1675},"This is then saved to our session, which allows us to maintain the signed-in state across requests. Like with the primary route, a redirect is present to another route.",{"type":20,"tag":65,"props":1677,"children":1679},{"id":1678},"home-route",[1680],{"type":32,"value":1681},"Home route",{"type":20,"tag":77,"props":1683,"children":1685},{"className":301,"code":1684,"language":303,"meta":7,"style":7},"app.get('\u002F', (req, res) => {\n    const { user } = req.session;\n    res.status(200).send(user);\n});\n",[1686],{"type":20,"tag":84,"props":1687,"children":1688},{"__ignoreMap":7},[1689,1737,1767,1800],{"type":20,"tag":88,"props":1690,"children":1691},{"class":90,"line":91},[1692,1696,1700,1704,1709,1713,1717,1721,1725,1729,1733],{"type":20,"tag":88,"props":1693,"children":1694},{"style":138},[1695],{"type":32,"value":581},{"type":20,"tag":88,"props":1697,"children":1698},{"style":95},[1699],{"type":32,"value":949},{"type":20,"tag":88,"props":1701,"children":1702},{"style":138},[1703],{"type":32,"value":591},{"type":20,"tag":88,"props":1705,"children":1706},{"style":101},[1707],{"type":32,"value":1708},"'\u002F'",{"type":20,"tag":88,"props":1710,"children":1711},{"style":138},[1712],{"type":32,"value":963},{"type":20,"tag":88,"props":1714,"children":1715},{"style":966},[1716],{"type":32,"value":969},{"type":20,"tag":88,"props":1718,"children":1719},{"style":138},[1720],{"type":32,"value":974},{"type":20,"tag":88,"props":1722,"children":1723},{"style":966},[1724],{"type":32,"value":979},{"type":20,"tag":88,"props":1726,"children":1727},{"style":138},[1728],{"type":32,"value":984},{"type":20,"tag":88,"props":1730,"children":1731},{"style":313},[1732],{"type":32,"value":730},{"type":20,"tag":88,"props":1734,"children":1735},{"style":138},[1736],{"type":32,"value":735},{"type":20,"tag":88,"props":1738,"children":1739},{"class":90,"line":144},[1740,1745,1749,1754,1758,1762],{"type":20,"tag":88,"props":1741,"children":1742},{"style":313},[1743],{"type":32,"value":1744},"    const",{"type":20,"tag":88,"props":1746,"children":1747},{"style":138},[1748],{"type":32,"value":1398},{"type":20,"tag":88,"props":1750,"children":1751},{"style":107},[1752],{"type":32,"value":1753},"user",{"type":20,"tag":88,"props":1755,"children":1756},{"style":138},[1757],{"type":32,"value":1417},{"type":20,"tag":88,"props":1759,"children":1760},{"style":313},[1761],{"type":32,"value":817},{"type":20,"tag":88,"props":1763,"children":1764},{"style":138},[1765],{"type":32,"value":1766}," req.session;\n",{"type":20,"tag":88,"props":1768,"children":1769},{"class":90,"line":163},[1770,1774,1778,1782,1787,1791,1795],{"type":20,"tag":88,"props":1771,"children":1772},{"style":138},[1773],{"type":32,"value":1021},{"type":20,"tag":88,"props":1775,"children":1776},{"style":95},[1777],{"type":32,"value":1600},{"type":20,"tag":88,"props":1779,"children":1780},{"style":138},[1781],{"type":32,"value":591},{"type":20,"tag":88,"props":1783,"children":1784},{"style":107},[1785],{"type":32,"value":1786},"200",{"type":20,"tag":88,"props":1788,"children":1789},{"style":138},[1790],{"type":32,"value":1614},{"type":20,"tag":88,"props":1792,"children":1793},{"style":95},[1794],{"type":32,"value":1619},{"type":20,"tag":88,"props":1796,"children":1797},{"style":138},[1798],{"type":32,"value":1799},"(user);\n",{"type":20,"tag":88,"props":1801,"children":1802},{"class":90,"line":233},[1803],{"type":20,"tag":88,"props":1804,"children":1805},{"style":138},[1806],{"type":32,"value":777},{"type":20,"tag":21,"props":1808,"children":1809},{},[1810],{"type":32,"value":1811},"With this route, we are simply returning the data of the signed-in user (if they are signed in).",{"type":20,"tag":65,"props":1813,"children":1815},{"id":1814},"connecting-to-the-front-end",[1816],{"type":32,"value":1817},"Connecting to the front-end",{"type":20,"tag":21,"props":1819,"children":1820},{},[1821,1823,1829],{"type":32,"value":1822},"The ",{"type":20,"tag":84,"props":1824,"children":1826},{"className":1825},[],[1827],{"type":32,"value":1828},"\u002Fapi\u002Fv1\u002Fauth\u002Fsteam",{"type":32,"value":1830}," route is the one we redirect users to from the front-end using a simple href:",{"type":20,"tag":77,"props":1832,"children":1836},{"className":1833,"code":1834,"language":1835,"meta":7,"style":7},"language-html shiki shiki-themes github-dark","\u003Ca href=\"http:\u002F\u002Flocalhost:3000\u002Fapi\u002Fv1\u002Fauth\u002Fsteam\">Sign in\u003C\u002Fa>\n","html",[1837],{"type":20,"tag":84,"props":1838,"children":1839},{"__ignoreMap":7},[1840],{"type":20,"tag":88,"props":1841,"children":1842},{"class":90,"line":91},[1843,1848,1853,1858,1862,1867,1872,1876],{"type":20,"tag":88,"props":1844,"children":1845},{"style":138},[1846],{"type":32,"value":1847},"\u003C",{"type":20,"tag":88,"props":1849,"children":1851},{"style":1850},"--shiki-default:#85E89D",[1852],{"type":32,"value":40},{"type":20,"tag":88,"props":1854,"children":1855},{"style":95},[1856],{"type":32,"value":1857}," href",{"type":20,"tag":88,"props":1859,"children":1860},{"style":138},[1861],{"type":32,"value":817},{"type":20,"tag":88,"props":1863,"children":1864},{"style":101},[1865],{"type":32,"value":1866},"\"http:\u002F\u002Flocalhost:3000\u002Fapi\u002Fv1\u002Fauth\u002Fsteam\"",{"type":20,"tag":88,"props":1868,"children":1869},{"style":138},[1870],{"type":32,"value":1871},">Sign in\u003C\u002F",{"type":20,"tag":88,"props":1873,"children":1874},{"style":1850},[1875],{"type":32,"value":40},{"type":20,"tag":88,"props":1877,"children":1878},{"style":138},[1879],{"type":32,"value":1880},">\n",{"type":20,"tag":21,"props":1882,"children":1883},{},[1884],{"type":32,"value":1885},"Having added this code, start your server and navigate to said URL, and you should be met with the following familiar official Steam page:",{"type":20,"tag":21,"props":1887,"children":1888},{},[1889],{"type":20,"tag":25,"props":1890,"children":1893},{"alt":1891,"src":1892},"Sign in page visible by navigating to localhost:3000\u002Fapi\u002Fv1\u002Fauth\u002Fsteam","\u002Fimg\u002Farticles\u002Fsign-in-through-steam\u002Fsteam-signin-page.webp",[],{"type":20,"tag":21,"props":1895,"children":1898},{"className":1896},[1897],"img-caption",[1899],{"type":32,"value":1891},{"type":20,"tag":21,"props":1901,"children":1902},{},[1903,1905,1911],{"type":32,"value":1904},"Now, sign in using your own Steam account and you will be redirected to the main page, ",{"type":20,"tag":84,"props":1906,"children":1908},{"className":1907},[],[1909],{"type":32,"value":1910},"localhost:3000\u002F",{"type":32,"value":1912},", where you will be met with the following:",{"type":20,"tag":21,"props":1914,"children":1915},{},[1916],{"type":20,"tag":25,"props":1917,"children":1920},{"alt":1918,"src":1919},"Data about steam user available after sign in","\u002Fimg\u002Farticles\u002Fsign-in-through-steam\u002Fsession-user.png",[],{"type":20,"tag":21,"props":1922,"children":1924},{"className":1923},[1897],[1925],{"type":32,"value":1926},"Data about steam user available after sign in.",{"type":20,"tag":21,"props":1928,"children":1929},{},[1930,1932,1938,1940,1946,1948,1954],{"type":32,"value":1931},"This is just the body of ",{"type":20,"tag":84,"props":1933,"children":1935},{"className":1934},[],[1936],{"type":32,"value":1937},"req.session.user",{"type":32,"value":1939}," (see the ",{"type":20,"tag":84,"props":1941,"children":1943},{"className":1942},[],[1944],{"type":32,"value":1945},"\u002F",{"type":32,"value":1947}," route, where you can see the ",{"type":20,"tag":84,"props":1949,"children":1951},{"className":1950},[],[1952],{"type":32,"value":1953},"res.send()",{"type":32,"value":1955},"). From this JSON data you can get the user’s Steam name, avatar, and their SteamID64.",{"type":20,"tag":65,"props":1957,"children":1959},{"id":1958},"next-steps",[1960],{"type":32,"value":1961},"Next steps",{"type":20,"tag":21,"props":1963,"children":1964},{},[1965],{"type":32,"value":1966},"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.",{"type":20,"tag":21,"props":1968,"children":1969},{},[1970,1972,1978,1980,1986],{"type":32,"value":1971},"If you have any questions, get in touch via ",{"type":20,"tag":40,"props":1973,"children":1975},{"href":1974},"\u002Fcontact",[1976],{"type":32,"value":1977},"contact",{"type":32,"value":1979}," or email ",{"type":20,"tag":40,"props":1981,"children":1983},{"href":1982},"mailto:kevin@jkmholding.com",[1984],{"type":32,"value":1985},"kevin@jkmholding.com",{"type":32,"value":298},{"type":20,"tag":21,"props":1988,"children":1989},{},[1990,1992,1998],{"type":32,"value":1991},"If you are interested in hiring us to create a project utilizing the Steam API — e.g. trading bots, gambling websites, skin trading websites, and more — see ",{"type":20,"tag":40,"props":1993,"children":1995},{"href":1994},"\u002F#services",[1996],{"type":32,"value":1997},"what we build",{"type":32,"value":298},{"type":20,"tag":2000,"props":2001,"children":2002},"style",{},[2003],{"type":32,"value":2004},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":7,"searchDepth":144,"depth":144,"links":2006},[2007,2008,2009,2010,2011,2012,2013,2014],{"id":67,"depth":144,"text":70},{"id":281,"depth":144,"text":284},{"id":896,"depth":144,"text":899},{"id":922,"depth":144,"text":925},{"id":1118,"depth":144,"text":1121},{"id":1678,"depth":144,"text":1681},{"id":1814,"depth":144,"text":1817},{"id":1958,"depth":144,"text":1961},"markdown","content:articles:sign-in-through-steam-using-nodejs.md","content","articles\u002Fsign-in-through-steam-using-nodejs.md","articles\u002Fsign-in-through-steam-using-nodejs","md",1786464664064]