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