Belajar Authentik - Branding & Theming

#Pendahuluan

Di episode 19, kalian menutup celah serangan dengan reputation dan deteksi ancaman. Sekarang saatnya berhenti terlihat seperti instalasi bawaan. Authentik adalah IdP yang UI-first, dan itu juga berlaku untuk sisi kustomisasi. Episode 20 membahas branding dan theming — mengubah halaman login, tema, dan pesan agar terasa milik organisasi kalian, bukan milik Authentik.

Analoginya seperti pindah ke kantor baru: koneksi listrik dan internet sama untuk semua, tapi dekorasi, logo, dan warna dinding yang membuat ruangan itu terasa milik perusahaan kalian.

#Tenant dan Objek Brand

Dua konsep inti yang perlu dipahami:

• Tenant adalah ruang lingkup konfigurasi terisolasi dalam satu instalasi Authentik.
• Brand adalah representasi tampilan dan perilaku per tenant, diikat ke satu atau lebih nama domain.

Karena binding dilakukan per domain, satu instalasi Authentik bisa melayani beberapa brand berbeda — misalnya auth.example.com untuk karyawan dan id.example.com untuk pelanggan — masing-masing dengan tampilan sendiri.

#Menyesuaikan Halaman Login

Pengaturan brand dikelola dari menu Admin Interface → Brands, dan objeknya juga bisa diakses lewat API pada /api/v3/brands/brands/. Beberapa hal yang bisa diubah:

• Logo dan favicon — unggah aset milik kalian; keduanya disimpan di penyimpanan media yang sama dengan instalasi.
• Nama merek (branding_title) — teks identitas yang ditampilkan di halaman login.
• Flow default per brand — pilih flow autentikasi, enrollment, dan recovery yang berbeda untuk setiap brand.
• Tema — pilihan dark, light, atau mengikuti preferensi perangkat pengguna.

Logo yang konsisten di halaman login membuat pengguna tidak ragu bahwa mereka berada di halaman yang benar — bagian kecil namun penting dari pertahanan terhadap phishing.

#Tema dan Mode Gelap

Authentik mendukung tema terang dan gelap, diatur di level brand maupun preferensi pengguna. Kalian bisa memaksa satu tema agar seluruh alur konsisten. Untuk kustomisasi visual yang lebih dalam, fokuslah pada aset brand dan desain flow; Authentik tidak menyediakan kolom CSS bebas di UI, sehingga pendekatan yang terdukung adalah memilih aset dan susunan stage dengan saksama.

#Welcome Screen lewat Custom Flow Stage

Authentik tidak memiliki stage "welcome" khusus — layar seperti itu adalah hasil desain flow. Kalian bisa menyusunnya dari stage yang sudah ada di episode 4:

• Tambahkan consent stage dengan judul dan teks sambutan di awal flow autentikasi, atau di flow enrollment setelah akun dibuat.
• Gunakan prompt stage untuk mengumpulkan data tambahan sekaligus menyampaikan pesan brand.
• Susun urutan stage di flow designer sampai alurnya terasa seperti sambutan, bukan sekadar gerbang masuk.

Prinsipnya: di Authentik, "halaman kustom" adalah kombinasi stage dalam flow, bukan file HTML terpisah.

#Blueprint untuk Branding

Karena brand adalah objek konfigurasi biasa, ia bisa dibuat deklaratif lewat blueprint (dibahas tuntas di episode 21). Contoh sederhana:

version: 1
entries:
  - model: authentik_brands.brand
    identifiers:
      domain: auth.example.com
    attrs:
      default: true
      branding_title: Perusahaan Kalian
      branding_logo: /static/logo-perusahaan.png
      branding_favicon: /static/favicon.ico
      flow_authentication: !find authentik_flows.flow
        where:
          - slug: default-authentication-flow

#Lokale dan Bahasa

Antarmuka Authentik tersedia dalam banyak bahasa dan bisa diatur per brand lewat default_locale. Setiap pengguna juga bisa memilih preferensi bahasanya sendiri. Konsistensi bahasa di seluruh alur login mengurangi salah paham dan mempercepat penyelesaian autentikasi — kecil, tapi terasa.

#Custom Footer Text

Brand mendukung daftar tautan di footer halaman login lewat footer_links. Dengan menyimpan nilai JSON pada brand:

[
  { "name": "Dokumentasi", "href": "https://docs.goauthentik.io" },
  { "name": "Dukungan", "href": "https://support.example.com" }
]

Setiap item dirender sebagai tautan di footer. Pastikan URL-nya tepercaya agar tidak mengarahkan pengguna ke lokasi yang tidak seharusnya.

#Penutup

Ringkasan episode 20:

• Brand diikat ke domain dan menampung logo, tema, flow default, lokale, dan footer.
• "Halaman kustom" adalah komposisi stage dalam flow, bukan file HTML.
• Branding bisa dituliskan sebagai blueprint deklaratif.
• default_locale dan footer_links melengkapi pengalaman lokal.

Di episode 21, kita otomatisasi semuanya: API dan automation untuk membuat user, flow, dan properti secara terprogram, plus blueprint dan SDK. Sampai jumpa!