https://github.com/sivert-io/steam-provider-auth.js

Custom steam provider for Auth.js (NextAuth.js v5)
https://github.com/sivert-io/steam-provider-auth.js

authjs authjs-v5 express nextauth nextauthjs nextauthv5 nextjsauth qwik steam steamauth svelte sveltekit

Last synced: 2 months ago
JSON representation

Custom steam provider for Auth.js (NextAuth.js v5)

Host: GitHub
URL: https://github.com/sivert-io/steam-provider-auth.js
Owner: sivert-io
Created: 2025-03-17T01:53:28.000Z (2 months ago)
Default Branch: main
Last Pushed: 2025-03-17T02:27:09.000Z (2 months ago)
Last Synced: 2025-03-17T03:25:28.940Z (2 months ago)
Topics: authjs, authjs-v5, express, nextauth, nextauthjs, nextauthv5, nextjsauth, qwik, steam, steamauth, svelte, sveltekit
Language: TypeScript
Homepage: https://authjs.dev/
Size: 19.5 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Steam Auth Provider for Auth.js 🚀🔥

This guide walks you through **adding Steam authentication** to **Auth.js (NextAuth.js v5)**. Since Auth.js now runs **on the edge**, we need a browser-compatible approach, avoiding Node.js-specific packages like `crypto`.

> **Note:** This tutorial is based on **Next.js**, but the same approach can be adapted for other frameworks that support Auth.js. The key parts are handling OpenID authentication, passing the required parameters, and ensuring compatibility with an edge runtime.

Heavily inspired by [next-auth-steam](https://github.com/Nekonyx/next-auth-steam) (Steam authentication provider for NextAuth.js v4).

## 📂 Folder Structure

Below is the recommended structure for integrating Steam authentication:

```
your-project/
├── providers/
│ ├── steam.ts # Steam authentication provider
├── types/
│ ├── auth.d.ts # TypeScript definitions for Steam user data
├── app/
│ ├── api/
│ │ ├── auth/
│ │ │ ├── verify/
│ │ │ │ ├── route.ts # Dummy token route for Steam authentication
├── auth.ts # Auth.js configuration
```

## 📦 Requirements

Before you start, install the required package:

```
pnpm install openid
```

Since this is just a **tutorial**, there is no `package.json` provided—you'll need to add the files manually into your existing Auth.js setup.

## 🛠️ Setup

1. **Set Up Environment Variables**
- Create a `.env` file and add:

```
NEXTAUTH_URL=https://mywebsite.com
NEXTAUTH_STEAM_SECRET=
```

2. **Create the Steam Provider**
- Add a file called `steam.ts` inside the `providers/` directory.
- This file will handle the Steam OpenID authentication flow.

3. **Update Your Auth Configuration**
- Modify your `auth.ts` file to use the Steam provider.
- Ensure `callbackUrl` matches the verification route in the next step.

4. **Create a Dummy Token Route**
- Steam’s OpenID system does **not** provide an OAuth token.
- To work around this, create a verification route at `app/api/auth/verify/route.ts`.

5. **Define TypeScript Types**
- To ensure type safety, add `types/auth.d.ts`.
- This extends Auth.js types with Steam profile data.

## 🎯 Notes

- **Steam does not provide an access token**, so we create a dummy-token endpoint.
- The `/api/auth/verify/` route can be renamed, but it **must** match `callbackUrl` in `auth.ts`.
- Since this is a tutorial, **you must integrate these files into your existing Auth.js setup**.

## 🚀 Get Started

- Add the necessary files to your project.
- Install dependencies with `pnpm install openid`.
- Set up your `.env` file.
- Configure Auth.js to use Steam.
- Deploy your app and enjoy Steam authentication! 🎮