Your Next.js app with seamless Steam authentication! 🎉
This is a streamlined and improved version of the Steam authentication provider for next-auth! 🎮 This package is a fork of Nekonyx/next-auth-steam, designed to optimize your authentication flow and eliminate unnecessary overhead. Say goodbye to the mandatory request parameter everywhere and the frequent need for getServersideProps—this implementation is all about efficiency and developer happiness! 😄
NextAuth. Therefore for NextAuth() you should pass it by default. However on useSession or getServerSession is optional.getServerSession.onUserInfoRequest a simple method that you can have access to the context, plus keeping your api key secure, why? We value your security. These keys shouldn't be just passed when is not needed.npm install @hyperplay/next-auth-steamyarn add @hyperplay/next-auth-steampnpm install @hyperplay/next-auth-steamThis setup can be utlized for both app router and legacy version router.
// app/api/auth/[...nextauth]/route.ts
import NextAuth from 'next-auth'
import { onUserInfoRequestContext } from '@hyperplay/next-auth-steam'
const auth = async (req: any, res: any) => {
return await NextAuth(req, res, {
providers: [
SteamProvider(
{
nextAuthUrl: `${process.env.NEXTAUTH_URL!}/api/auth/callback`, // https://example.com/api/auth/callback/steam
onUserInfoRequest: (ctx: onUserInfoRequestContext) => {
// execute something on token request
// some profile data which will be returned back to you on the client
// example get the player data and merge it with the user info, therefore you wont need to pass any secret to us
const response = await fetch(
`https://api.steampowered.com/ISteamUser/GetPlayerSummaries/v0002/?key=${MY_API_KEY}&steamids=${ctx.tokens.steamId}`
)
const data = await response.json()
return data.response.players[0]
}
},
req
)
]
})
}
export { auth as GET, auth as POST }This example covers a real world scenario authentication with fetching of steam user data. In simple terms we've got onUserInfoRequest which where you will get your steam player summary data with your own API KEY.
// utils/auth.ts
import { AuthOptions } from "next-auth";
import { STEAM_PROVIDER_ID, onUserInfoRequestContext } from '@hyperplay/next-auth-steam'
export const authOptions: AuthOptions = {
session: {
strategy: "jwt",
},
secret: process.env.NEXTAUTH_SECRET,
providers: [
...
SteamProvider({
nextAuthUrl: `${process.env.NEXTAUTH_URL!}/api/auth/callback`,
}),
]
callbacks: {
async signIn({ user, account, profile, email, credentials }) {
// Handle after sign in
return true
},
async redirect({ url, baseUrl }) {
// Handle your redirection if any
return baseUrl
},
async session({ session, user, token }) {
// Handle your session
if ('steam' in token) {
session.user.steam = token.steam
}
return session
},
async jwt({ token, user, account, profile, isNewUser }) {
// Handle your jwt
if (account?.provider === STEAM_PROVIDER_ID) {
token.steam = profile
}
return token
}
}
}
export const authOptionsWithRequest: (request: NextApiRequest | NextRequest) = (request: NextApiRequest | NextRequest) => {
return {
...authOptions,
providers: [
...authOptions.providers.filter(({ id }) => id !== STEAM_PROVIDER_ID),
SteamProvider({
nextAuthUrl: `${process.env.NEXTAUTH_URL!}/api/auth/callback`,
onUserInfoRequest: (ctx: onUserInfoRequestContext) => {
// execute something on token request
// some profile data which will be returned back to you on the client
// example get the player data and merge it with the user info, therefore you wont need to pass any secret to us
const response = await fetch(
`https://api.steampowered.com/ISteamUser/GetPlayerSummaries/v0002/?key=${MY_API_KEY}&steamids=${ctx.tokens.steamId}`
)
const data = await response.json()
return data.response.players[0]
}
}, request),
],
};
};
// app/api/auth/[...nextauth]/route.ts
import NextAuth from "next-auth";
import { authOptionsWithRequest } from "@/utils/auth";
const auth = async (req: any, res: any) => {
return await NextAuth(req, res, authOptionsWithRequest(req));
};
export { auth as GET, auth as POST };
// app/account/page.tsx
import { getServerSession } from 'next-auth';
import { authOptions } from '@/utils/auth';
import Dashboard from '@/components/account/dashboard';
export default async function AccountPage() {
const session = await getServerSession(authOptions);
return (
<Dashboard profile={session.profile} />
);
};Dive into more examples in the examples folder and get your Steam integration up and running like a charm! 🌈
We would like to make the support for Steam seamless as possible
openid npm package which uses node modules makes it difficult. We're using vite at the moment, with vite-plugin-node-polyfills.Request it is something that I'd like to deprecate near the future, another reason why it is optional and only necessary in one place NextAuth(). This is difficult at the moment, due of steam has legacy version of openid, else it would be easily integrable just like the other providers. You can see further at next-auth -> core\lib\oauth\callback.js:103, and a Vercel/Next discussion about why request is not accessible on the backend upon callbacks.Let us know about the issue, you can open an issue on the Github repository | PR's are welcome and it is helpful not only for us, but for everyone else who uses the package & future engineers who require it.
We highly suggest you to make sure that the package is updated to latest version, as we may need to update the implementation as per times changes.
A web3-friendly game store from the future. The HyperPlay Store also aggregates Epic Games, GOG, and Amazon Prime Gaming.