Skip to main content

SSO Login - Component Documentation

SSO login adalah implementasi authentication menggunakan protokol OIDC (OpenID Connect). Dokumentasi ini menjelaskan bagaimana komponen di frontend dan backend bekerja sama untuk handle login.

Alur Login​

Frontend Implementation​

OIDC Configuration​

File: src/hooks/oidc.ts

const oidcConfig = {
  authority: VITE_OIDC_AUTHORITY,
  client_id: VITE_OIDC_CLIENT_ID,
  redirect_uri: VITE_OIDC_REDIRECT_URI,
  response_type: VITE_OIDC_RESPONSE_TYPE,
  scope: VITE_OIDC_SCOPE,
  post_logout_redirect_uri: VITE_OIDC_POST_LOGOUT_REDIRECT_URI,
  userStore: new WebStorageStateStore({ store: window.localStorage }),
};

Setiap variable punya peran:

  • authority - URL SSO server
  • client_id - ID yang terdaftar di SSO
  • redirect_uri - URL callback setelah login di SSO
  • scope - Apa aja data yang diminta (openid, profile, email, dll)

Login Function​

export function LoginOIDC() {
  userManager.signinRedirect();
}

Fungsi ini trigger redirect ke SSO login page.

Callback Handler​

File: src/hooks/callback.tsx

Handler ini dijalankan pas user di-redirect balik dari SSO:

// 1. Parse token dari URL
const userManager = new UserManager(oidcConfig);
const user = await userManager.signinCallback();

// 2. Kirim ke backend buat ditukar dengan app token
const response = await fetch('/auth/login-sso', {
  method: 'POST',
  body: JSON.stringify({
    id_token: user.id_token,
    access_token: user.access_token,
    profile: user.profile
  })
});

// 3. Simpan app token
const loginData = await response.json();
login(loginData);

// 4. Redirect ke home
navigate('/');

Backend Implementation​

Login Endpoint​

File: backend-user-service/routes/auth/route.go

POST /auth/login-sso

Request:

{
  "id_token": "eyJhbGciOi...",
  "access_token": "eyJhbGciOi...",
  "profile": {
    "email": "user@example.com",
    "name": "John Doe",
    "sub": "user-123"
  }
}

Response:

{
  "token": "eyJhbGciOiJIUzI1NiIs...",
  "user_id": "550e8400-e29b-41d4-a716",
  "name": "John Doe",
  "email": "user@example.com",
  "user_groups": ["admin", "developer"],
  "attributes": {
    "department": "IT",
    "position": "Engineer"
  }
}

Plus cookie access_token dengan HTTPOnly flag.

Backend Processing​

Backend melakukan:

  1. Check user - Cari user di database berdasarkan email
  2. Buat user baru - Kalau belum ada (first time login)
  3. Ambil attributes - Query user groups dan attributes
  4. Generate token - Buat JWT token aplikasi dengan data user
  5. Set cookie - Simpan token di cookie HTTPOnly (30 hari expire)

Token Management​

SSO Token​

Token dari SSO server (hanya temporary):

  • id_token - Identity token (JWT)
  • access_token - Access token SSO

Dipakai hanya untuk exchange dengan app token. Setelah itu di-discard.

Application Token​

Token dari backend aplikasi (yang dipakai terus):

  • Berisi user_id, email, groups, attributes
  • JWT format
  • Expire 24 jam di backend
  • Disimpan di:
    • Cookie HTTPOnly (expire 30 hari)
    • localStorage via AuthContext

Token ini dipakai untuk semua request ke backend selanjutnya.

Environment Variables​

VITE_OIDC_AUTHORITY=https://sso.example.com
VITE_OIDC_CLIENT_ID=my-app-client
VITE_OIDC_REDIRECT_URI=https://app.example.com/callback
VITE_OIDC_RESPONSE_TYPE=code
VITE_OIDC_SCOPE=openid profile email
VITE_OIDC_POST_LOGOUT_REDIRECT_URI=https://app.example.com

VITE_OIDC_REDIRECT_URI sangat penting - ini adalah callback URL yang akan di-hit SSO pas user login berhasil.

Security Notes​

  • SSO token tidak disimpan lama di frontend, langsung ditukar dengan app token
  • App token disimpan di cookie HTTPOnly biar aman dari XSS
  • Backend validasi setiap request pake app token
  • Kalau app token expired, user harus login ulang via SSO
  • Cookie punya HTTPOnly + Secure flag buat extra protection