nextauth-steam-provider

A Steam authentication provider for NextAuth.js v4 that makes it incredibly simple to add Steam authentication to your Next.js application.

Features

🚀 Simple Setup: Just a few lines of code to get started
🔒 Secure Authentication: Uses Steam's OpenID for authentication
🔄 Session Management: Automatically handles sessions and cookies
📱 Responsive: Works on all devices
🌐 Cross-Browser Compatible: Works in all modern browsers
📝 TypeScript Support: Full TypeScript support with type definitions
🧩 Modular: Use only what you need
📚 Well Documented: Comprehensive documentation and examples

Installation

npm install nextauth-steam-provider
# or
yarn add nextauth-steam-provider
# or
pnpm add nextauth-steam-provider

Quick Start

1. Get a Steam API Key

You need a Steam API key to use this library. You can get one from https://steamcommunity.com/dev/apikey.

2. Set Up Environment Variables

Add the following environment variables to your .env.local file:

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-nextauth-secret
STEAM_API_KEY=your-steam-api-key

3. Super Simple Setup (App Router)

The easiest way to add Steam authentication to your Next.js App Router project:

// app/auth.ts
import { setupSteamAuth } from 'nextauth-steam-provider';

export const { handlers, auth, signIn, signOut, steamLogin, steamCallback } = setupSteamAuth({
  apiKey: process.env.STEAM_API_KEY!,
});

// app/api/auth/[...nextauth]/route.ts
import { handlers } from '../../../auth';

export const { GET, POST } = handlers;

// app/api/auth/steam-callback/route.ts
import { NextRequest } from 'next/server';
import { steamCallback } from '../../../auth';

export async function GET(request: NextRequest) {
  return steamCallback(request, {
    redirect: (url) => Response.redirect(url),
  });
}

// app/components/login-button.tsx
'use client';

import { steamLogin } from '../../auth';

export default function LoginButton() {
  return (
    <button onClick={steamLogin}>
      Login with Steam
    </button>
  );
}

4. Simple Setup (Pages Router)

For Next.js Pages Router projects:

// pages/api/auth/[...nextauth].js
import NextAuth from 'next-auth';
import { createSteamAuth } from 'nextauth-steam-provider';

export default NextAuth(
  createSteamAuth({
    apiKey: process.env.STEAM_API_KEY,
  })
);

// pages/api/auth/steam-callback.js
import { createSteamCallback } from 'nextauth-steam-provider';

const handler = createSteamCallback({
  apiKey: process.env.STEAM_API_KEY,
});

export default handler;

// components/LoginButton.js
import { createSteamLogin } from 'nextauth-steam-provider';

const steamLogin = createSteamLogin();

export default function LoginButton() {
  return (
    <button onClick={steamLogin}>
      Login with Steam
    </button>
  );
}

Advanced Usage

Custom Configuration

You can customize the authentication flow with additional options:

import { setupSteamAuth } from 'nextauth-steam-provider';

export const { handlers, auth, signIn, signOut, steamLogin, steamCallback } = setupSteamAuth({
  apiKey: process.env.STEAM_API_KEY!,
  secret: 'your-custom-secret', // Optional, defaults to NEXTAUTH_SECRET
  pages: {
    signIn: '/custom-signin', // Optional, defaults to /auth/signin
    error: '/custom-error', // Optional, defaults to /auth/error
    signOut: '/custom-signout', // Optional, defaults to /auth/signout
  },
  callbacks: {
    // Optional custom callbacks
    jwt: async ({ token, user }) => {
      // Customize JWT token
      return token;
    },
    session: async ({ session, token }) => {
      // Customize session
      return session;
    },
  },
});

Accessing User Data

The user's Steam data is available in the session:

'use client';

import { useSession } from 'next-auth/react';

export default function Profile() {
  const { data: session } = useSession();

  if (!session) {
    return <div>Not signed in</div>;
  }

  return (
    <div>
      <h1>Profile</h1>
      <p>Steam ID: {session.user.steamId}</p>
      <p>Name: {session.user.name}</p>
      <img src={session.user.image} alt={session.user.name} />
    </div>
  );
}

API Reference

`setupSteamAuth(options)`

Creates a complete Steam authentication solution for Next.js App Router.

Options

apiKey (required): Your Steam API key.
secret (optional): Secret used to encrypt cookies and tokens. Defaults to process.env.NEXTAUTH_SECRET.
pages (optional): Custom pages for authentication.
callbacks (optional): Custom callbacks for JWT and session.

`createSteamAuth(options)`

Creates a complete NextAuth configuration with Steam authentication.

Options

Same as setupSteamAuth.

`SteamProvider(options)`

Creates a Steam authentication provider for NextAuth.js.

Options

apiKey (required): Your Steam API key.
callbackUrl (optional): The callback URL to use for the Steam authentication. Defaults to /api/auth/callback/steam.
redirectUrl (optional): The URL to redirect to after authentication. Defaults to /.

`createSteamLogin(callbackUrl?)`

Creates a client-side Steam login function.

Parameters

callbackUrl (optional): The URL to redirect to after authentication.

`createSteamCallback(options)`

Creates a server-side Steam callback handler for Next.js API routes.

Options

apiKey (required): Your Steam API key.
redirectUrl (optional): The URL to redirect to after authentication. Defaults to /.

Types

`SteamProfile`

The Steam user profile as returned by the Steam API.

`SteamUser`

The Steam user data normalized for NextAuth.js.

`SteamSession`

Session with Steam user data.

`SteamProviderOptions`

The options for the Steam provider.

`NextAuthConfig`

NextAuth configuration.

Examples

Check out the examples directory for complete examples of how to use this library with both App Router and Pages Router.

Repository

GitHub Repository

License

MIT