Login with Omen Kit

Contents

1. Overview
2. Button Kit
3. Quick Start (HTML)
4. React Component
5. Handling the Callback
6. Fetching User Profile
7. Brand Guidelines

Overview

"Login with Omen" lets users sign in to your app using their Omen account via the standard OAuth2 authorization code flow. This page provides ready-made button assets and copy-paste code to get you integrated quickly.

Prerequisites

• An Omen developer account — enable at /pound/developer
• An organization and application created in the developer portal
• Your client ID and client secret from the app settings
• A registered redirect URI (must match exactly)

Button Kit

Six SVG assets are available at /kit/. Use the variant that best fits your app's design.

Dark button/kit/login-omen-dark.svg

Light button/kit/login-omen-light.svg

Dark icon/kit/login-omen-icon-dark.svg

Light icon/kit/login-omen-icon-light.svg

Black logo/kit/omen-logo-black.svg

White logo/kit/omen-logo-white.svg

Quick Start (HTML)

Wrap the button SVG in a link to the Omen authorize endpoint. Replace the placeholder values with your app's credentials.

<a href="https://omen.gg/pound/authorize
    ?client_id=YOUR_CLIENT_ID
    &redirect_uri=https://yourapp.com/callback
    &response_type=code">
  <img
    src="https://omen.gg/kit/login-omen-dark.svg"
    alt="Login with Omen"
    height="48"
  />
</a>

For light backgrounds, use login-omen-light.svg. For icon-only buttons, use login-omen-icon-dark.svg or login-omen-icon-light.svg.

React Component

Drop this component into your React app. Pass your clientId and redirectUri as props.

function LoginWithOmen({ clientId, redirectUri, variant = 'dark' }) {
  const src = variant === 'dark'
    ? 'https://omen.gg/kit/login-omen-dark.svg'
    : 'https://omen.gg/kit/login-omen-light.svg'

  const href = `https://omen.gg/pound/authorize` +
    `?client_id=${clientId}` +
    `&redirect_uri=${encodeURIComponent(redirectUri)}` +
    `&response_type=code`

  return (
    <a href={href}>
      <img src={src} alt="Login with Omen" height={48} />
    </a>
  )
}

// Usage
<LoginWithOmen
  clientId="your_client_id"
  redirectUri="https://yourapp.com/callback"
/>

Handling the Callback

After the user approves your app, Omen redirects to your redirect_uri with a code query parameter. Exchange it for tokens on your server:

// Node.js server example
app.get('/callback', async (req, res) => {
  const { code } = req.query

  const response = await fetch('https://omen.gg/api/oauth/token', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: new URLSearchParams({
      grant_type: 'authorization_code',
      code,
      redirect_uri: 'https://yourapp.com/callback',
      client_id: process.env.OMEN_CLIENT_ID,
      client_secret: process.env.OMEN_CLIENT_SECRET,
    }),
  })

  const tokens = await response.json()
  // tokens.accessToken  — use for API calls
  // tokens.refreshToken — store securely for later refresh

  // Create a session for the user in your app
  req.session.omenTokens = tokens
  res.redirect('/dashboard')
})

See the full OAuth2 docs for refresh token handling and error codes.

Fetching User Profile

Use the access token to fetch the authenticated user's profile:

const profile = await fetch('https://omen.gg/api/profile', {
  headers: { Authorization: `Bearer ${accessToken}` },
}).then(r => r.json())

// profile.id    — unique user ID
// profile.name  — display name
// profile.image — avatar URL
// profile.badges — array of badges (if app is in an org)

Add ?include=data to also receive stored user data (appData and orgData). See the Profile API docs for full response details.

Brand Guidelines

When using the Omen button assets in your app, follow these rules:

• Use the provided SVGs as-is — do not alter colors, proportions, or logo shape
• Minimum button height: 40px (full buttons) or 32px (icon-only)
• Keep at least 8px of clear space around the button on all sides
• Use the dark variant on light backgrounds and vice versa for good contrast
• Do not place the button on busy or patterned backgrounds
• Do not add effects (shadows, glows, borders) to the button SVG
• The button text must remain "Login with Omen" — do not change the wording