Skip to main content

​
Authentication

5Stack uses Steam OpenID for secure authentication. All players must link their Steam account to access platform features.

​
How Steam Authentication Works

5Stack integrates with Steam’s authentication system to provide secure, seamless login without requiring separate credentials.

​
Authentication Flow

  1. Click Sign In: Navigate to the login page and click the “Sign in through Steam” button
  2. Steam Authorization: You’ll be redirected to Steam’s official login page
  3. Grant Permission: Authorize 5Stack to access your public Steam profile
  4. Account Creation: Your account is automatically created on first login
  5. Redirect Back: You’re returned to 5Stack and logged in
Your Steam credentials are never stored or handled by 5Stack. Authentication is handled entirely by Steam’s secure OpenID protocol.

​
The Login Process

When you visit the login page, you’ll see a simple interface with the platform branding and a Steam login button: 
// Login redirect handler from login.vue:81-83
signIn() {
  window.location.href = `${loginLinks.steam}?redirect=${encodeURIComponent(window.location.toString())}`;
}
The login link format is: 
https://{domain}/auth/steam?redirect={returnUrl}

​
Login States

When you’re not logged in, you’ll see:
  • Platform logo and branding
  • “Sign in through Steam” button
  • Optional footer with project links
The page automatically checks your authentication status and redirects you to the home page if you’re already logged in.

​
User Roles

5Stack implements a hierarchical role system. Your role determines what features and actions you can access.

User

Basic access - can play matches and join tournaments

Verified User

Enhanced privileges for verified community members

Streamer

Access to streaming features and broadcaster tools

Match Organizer

Can create and manage matches with moderation capabilities

Tournament Organizer

Full tournament creation and management permissions

Administrator

Complete platform access and system management

​
Role Hierarchy

Roles are hierarchical - higher roles inherit all permissions from lower roles: 
// Role order from AuthStore.ts:22-29
const roleOrder = [
  e_player_roles_enum.user,
  e_player_roles_enum.verified_user,
  e_player_roles_enum.streamer,
  e_player_roles_enum.match_organizer,
  e_player_roles_enum.tournament_organizer,
  e_player_roles_enum.administrator,
];

​
Authentication Store

The platform uses a Pinia store to manage authentication state across the application.

​
Fetching Your Profile

When you log in, 5Stack:
  1. Queries your profile from the GraphQL API
  2. Establishes WebSocket connection for real-time updates
  3. Subscribes to your data including matches, tournaments, and teams
  4. Loads role-specific features based on your permissions
// Authentication check from AuthStore.ts:90-104
const response = await getGraphqlClient().query({
  query: generateQuery({
    me: {
      role: true,
      steam_id: true,
      discord_id: true,
    },
  }),
  fetchPolicy: "network-only", // Disable cache
});

if (!response.data.me) {
  resolve(false);
  return;
}

socket.connect();

​
Available Computed Properties

The auth store provides reactive properties you can use throughout the app: 
const authStore = useAuthStore();

// Check specific roles
authStore.isUser
authStore.isVerifiedUser
authStore.isStreamer
authStore.isMatchOrganizer
authStore.isTournamentOrganizer
authStore.isAdmin

// Check if role is at or above a level
authStore.isRoleAbove(e_player_roles_enum.match_organizer)

​
Session Management

​
Real-time Subscriptions

Once authenticated, the platform subscribes to your player data in real-time: 
// From AuthStore.ts:43-53
const subscription = getGraphqlClient().subscribe({
  query: generateSubscription({
    players_by_pk: [
      {
        steam_id,
      },
      meFields,
    ],
  }),
});
This ensures:
  • Your profile updates instantly when changed
  • Match invites appear immediately
  • Friend status changes are reflected in real-time
  • Tournament notifications arrive without delay

​
WebSocket Connection

5Stack maintains a WebSocket connection for:
  • Match lobby communication
  • Matchmaking queue updates
  • Real-time chat messages
  • Voice communication coordination
If your WebSocket connection drops, the platform will automatically attempt to reconnect. You may see a brief notification during reconnection.

​
Discord Integration

5Stack supports optional Discord account linking for enhanced features: 
// Check Discord link status
const authStore = useAuthStore();
if (authStore.hasDiscordLinked) {
  // Discord features available
}

​
Linking Your Discord Account

  1. Navigate to your profile settings
  2. Click Link Discord Account
  3. Authorize 5Stack on Discord
  4. Your Discord account is now connected
Linking Discord enables tournament chat notifications, team coordination features, and Discord-based announcements.

​
Security Considerations

5Stack uses secure HTTP-only cookies for session management. Your session token is never exposed to JavaScript and is protected against XSS attacks.
Sessions are automatically refreshed in the background. You won’t be unexpectedly logged out during active use.
To log out, click your profile icon and select Logout. This invalidates your session on both client and server.

​
Troubleshooting

Can't log in?

Common solutions:
  • Ensure you’re logged into Steam in your browser
  • Check that cookies are enabled
  • Try clearing your browser cache
  • Disable ad blockers that might interfere with Steam OpenID
  • Verify your Steam profile is set to public

Already logged in but can't access features?

Your role may not have permission for certain features. Contact an administrator if you believe your role should be updated.

​
Next Steps

Player Profiles

Customize your profile and track your stats

Matchmaking

Start playing competitive matches

Teams

Create or join a team

Build docs developers (and LLMs) love

Get started for freeTalk to us