Session Strategies
Steam Strategy

Steam Strategy

This is a Steam (opens in a new tab) strategy for remix-auth (opens in a new tab) library.

Supported runtimes

RuntimeHas Support
Node.js✅
Cloudflare❓

Setup Guide

Install the package

npm install remix-auth-steam

Create the strategy instance

To properly use the library, you need to maintain these additional files in your app directory:

app/services/auth.server.ts
import { Authenticator } from "remix-auth";
import { sessionStorage } from "~/services/session.server";
import { SteamStrategy, SteamStrategyVerifyParams } from "remix-auth-steam";
 
export type User = SteamStrategyVerifyParams;
 
export let authenticator = new Authenticator<User>(sessionStorage);
 
authenticator.use(
  new SteamStrategy(
    {
      returnURL: "http://localhost:3000/auth/steam/callback",
      apiKey: "YOUR_STEAM_API_KEY", // you can get it here: https://steamcommunity.com/dev/apikey
    },
    async (user) => user // perform additional checks for user here, I just leave this to SteamStrategyVerifyParams value
  )
);
app/services/session.server.ts
import { createCookieSessionStorage } from "remix";
 
const calculateExpirationDate = (days: number) => {
  const expDate = new Date();
  expDate.setDate(expDate.getDate() + days);
  return expDate;
};
 
// export the whole sessionStorage object
export let sessionStorage = createCookieSessionStorage({
  cookie: {
    name: "_session", // use any name you want here
    sameSite: "lax", // this helps with CSRF
    path: "/", // remember to add this so the cookie will work in all routes
    httpOnly: true, // for security reasons, make this cookie http only
    secrets: ["s3cr3t"], // replace this with an actual secret
    secure: process.env.NODE_ENV === "production", // enable this in prod only
    expires: calculateExpirationDate(7), // expire cookie after 7 days
  },
});
 
// you can also export the methods individually for your own usage
export let { getSession, commitSession, destroySession } = sessionStorage;

Setup your routes

app/routes/auth/steam.tsx
import { LoaderFunction } from "remix";
import { authenticator } from "~/services/auth.server";
 
export let loader: LoaderFunction = async ({ request }) => {
  await authenticator.authenticate("steam", request, {});
};
app/routes/auth/steam/callback.tsx
import { LoaderFunction } from "remix";
import { authenticator } from "~/services/auth.server";
 
export let loader: LoaderFunction = ({ request }) => {
  return authenticator.authenticate("steam", request, {
    successRedirect: "/",
    failureRedirect: "/login",
  });
};

Utilization

After that, navigate to localhost:3000/auth/steam to check if it works. Here is an example of checking if user is authenticated: app/routes/index.tsx:

app/routes/index.tsx
import { LoaderFunction, useLoaderData } from "remix";
import { authenticator, User } from "~/services/auth.server";
 
export let loader: LoaderFunction = async ({ request }) => {
  const user = await authenticator.isAuthenticated(request);
  return user;
};
 
export default function Index() {
  const user: User | null = useLoaderData();
 
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
      {user ? <h1>User name: {user!.nickname}</h1> : <h1>Not authenticated</h1>}
    </div>
  );
}

If you are logged in, you should see your username from Steam API, otherwise you will see Not authenticated message.

Microsoft StrategyGitlab Strategy