├── .env.sample
├── .eslintrc.json
├── .github
└── workflows
│ └── ci.yml
├── .gitignore
├── LICENSE
├── README.md
├── next-env.d.ts
├── next.config.js
├── package-lock.json
├── package.json
├── public
├── favicon.ico
├── next.svg
├── thirteen.svg
└── vercel.svg
├── src
├── lib
│ ├── passport.ts
│ └── router.ts
├── pages
│ ├── _app.tsx
│ ├── _document.tsx
│ ├── api
│ │ └── auth
│ │ │ ├── login.ts
│ │ │ ├── logout.ts
│ │ │ └── return.ts
│ └── index.tsx
└── styles
│ └── globals.css
└── tsconfig.json
/.env.sample:
--------------------------------------------------------------------------------
1 | DOMAIN=http://localhost:3000
2 | SESSION_SECRET=ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789
3 | STEAM_API_KEY=ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789
4 |
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "next/core-web-vitals"
3 | }
4 |
--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
1 | name: CI
2 |
3 | on: [push, pull_request]
4 |
5 | jobs:
6 | build:
7 | runs-on: ubuntu-latest
8 |
9 | steps:
10 | - uses: actions/checkout@v3
11 |
12 | - name: Use Node.js ${{ matrix.node-version }}
13 | uses: actions/setup-node@v3
14 | with:
15 | node-version: ${{ matrix.node-version }}
16 |
17 | - name: Create temp session secret
18 | run: echo "SESSION_SECRET=abcdefghijklmnopqrstuvwxyz1234567890" > .env
19 |
20 | - name: Clean install
21 | run: npm ci
22 |
23 | - name: Run build
24 | run: npm run build --if-present
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 | .env
22 |
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | .pnpm-debug.log*
28 |
29 | # local env files
30 | .env*.local
31 |
32 | # vercel
33 | .vercel
34 |
35 | # typescript
36 | *.tsbuildinfo
37 | next-env.d.ts
38 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 Hilliam T.
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # NextJS Steam Authentication
2 | ### 📖 Table of Contents
3 | - [👋 Introduction](#-introduction)
4 | - [🔌 Getting Started](#-getting-started)
5 | - [⚙️ How It Works](#%EF%B8%8F-how-it-works)
6 | - [💡 Improvements to Make](#-improvements-to-make)
7 | - [📚 Helpful Resources](#-helpful-resources)
8 |
9 | ## 👋 Introduction
10 | NextJS is a React-based web framework that aims to deliver websites as statically as possible. This can provide many performance and development benefits over a framework like [Express](https://github.com/expressjs/express#readme).
11 |
12 | Setting up authentication can be tricky, especially with OpenID login systems such as Steam (there are not many implementations avaiable, let alone in NextJS). This repository is an example of how one may go about injecting Steam user authentication. This allows you to use Steam authentication with a NextJS API backend, and implement such components into your own project
13 |
14 |
15 |
16 | ## 🔌 Getting Started
17 |
18 | After downloading the project, you should install all of the required dependencies.
19 |
20 | $ npm install
21 |
22 | Fill in a `.env` file with the following keys filled, much like `.env.sample` (Remove `.sample` off the file name)
23 |
24 | DOMAIN=http://localhost:3000 # Where this app will run
25 | SESSION_SECRET=ABCD # 32+ char random string
26 | STEAM_API_KEY= # Your Steam API Key
27 |
28 |
29 | You can run the web application in `development` mode.
30 |
31 | $ npm run dev
32 |
33 | You can also test the web application for `production` if you feel the need.
34 |
35 | $ npm run build
36 | $ npm start
37 |
38 | ## ⚙️ How It Works
39 | - You make a request to the api/steam/login endpoint
40 | - Redirects you to steam oauth with a clientID (somehow) via the passport middleware in `passport.ts`
41 | - After you authenticate your account, it redirects you to the frontend with a cookie being sent to the backend.
42 | - The router directs the data received from the authentication, and sends it to the frontend via `getServerSideProps`. You can access it via the `user` parameter in the Index function `index.tsx`.
43 |
44 |
45 | ## 💡 Improvements To Make
46 | This is only one example of authenticating a user with their Steam account via NextJS. There are some fixes that can be added to better development and cleanliness without making significant changes.
47 |
48 | ##### Isolating Middleware
49 | `path` is set within `login.ts`, `logout.ts` and `return.ts` or the middleware will apply to all routes. An alternative solution will need to ensure that middleware set on an API route only runs on that API route. Removing `path` from each route handler will cause constantly redirect you back to Steam's login page.
50 |
51 | ##### Avoiding Manual Request Population
52 | `router` works in parallel with NextJS's native router. However, it needs to be explicitly activated per React page, as seen in `Index.getServerSideProps` where it will populate the `Request` object with any additional fields picked up. This can be repetitive in nature so having `router` run natively or just once for all pages would be ideal. **`getServerSideProps` receives the request of the steam profile data on the frontend.**
53 |
54 | ## "How to make the Steam auth a component?"
55 |
56 | You can copy and paste the component structure on `index.tsx`to another component of your choice (say, `steam.tsx`), just ensure you have the props paramater in both the component and the page file (`index.tsx`) to allow `getServerSideProps` to inject the request object cookie from the backend. (You only need `getServerSideProps` on the `index.tsx`, or page of the rendered content).
57 |
58 | Example
59 |
60 |
61 | **Here is our Here is Steam.tsx, our component-ized Steam authentication.**
62 |
63 | ```ts
64 |
65 |
66 | import Link from "next/link";
67 | import router from "@/lib/auth/router";
68 | import type { SteamProfile } from '@/lib/state/state'
69 |
70 |
71 | export default function Steam({ user }: {user: SteamProfile}) {
72 | console.log(user)
73 | return
74 | {user
75 | ?
76 | Welcome back!
77 | From logging in, your SteamID is {user.id}.
78 | You can call other APIs to get more information within `getServerSideProps` or within `lib/passport.ts`.
79 | Logout
80 |
13 | Welcome back!
14 | From logging in, your SteamID is {user.id}.
15 | You can call other APIs to get more information within `getServerSideProps` or within `lib/passport.ts`.
16 | Logout
17 |