feat: customizable favicon

ory · Aug 29, 2023 · 79e7723 · 79e7723
1 parent 5f67a1f
commit 79e7723
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 6 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/index.ts b/src/index.ts
@@ -5,7 +5,7 @@ import express, { Request, Response } from "express"
 import { engine } from "express-handlebars"
 import * as fs from "fs"
 import * as https from "https"
-import { handlebarsHelpers } from "./pkg"
+import { addFavicon, defaultConfig, handlebarsHelpers } from "./pkg"
 import { middleware as middlewareLogger } from "./pkg/logger"
 import {
   register404Route,
@@ -31,6 +31,7 @@ const router = express.Router()
 
 app.use(middlewareLogger)
 app.use(cookieParser())
+app.use(addFavicon(defaultConfig))
 app.set("view engine", "hbs")
 
 app.engine(

diff --git a/src/pkg/index.ts b/src/pkg/index.ts
@@ -30,6 +30,8 @@ export const defaultConfig: RouteOptionsCreator = () => {
   return {
     apiBaseUrl: apiBaseUrl,
     kratosBrowserUrl: apiBaseUrl,
+    faviconUrl: "favico.png",
+    faviconType: "image/png",
     ...sdk,
   }
 }

diff --git a/src/pkg/middleware.ts b/src/pkg/middleware.ts
@@ -77,6 +77,16 @@ export const requireAuth =
       })
   }
 
+export const addFavicon =
+  (createHelpers: RouteOptionsCreator) =>
+  (req: Request, res: Response, next: NextFunction) => {
+    const { faviconUrl, faviconType } = createHelpers(req, res)
+    res.locals.faviconUrl = faviconUrl
+    res.locals.faviconType = faviconType
+
+    next()
+  }
+
 /**
  * Sets the session in the request. If no session is found,
  * the request still succeeds.

diff --git a/src/pkg/route.ts b/src/pkg/route.ts
@@ -11,6 +11,8 @@ export interface RouteOptions {
   apiBaseUrl: string
   kratosBrowserUrl: string
   logoUrl?: string
+  faviconUrl?: string
+  faviconType?: string
   theme?: Theme
 }
 

diff --git a/src/routes/recovery.ts b/src/routes/recovery.ts
@@ -17,7 +17,10 @@ export const createRecoveryRoute: RouteCreator =
     res.locals.projectName = "Recover account"
 
     const { flow, return_to = "" } = req.query
-    const { frontend, kratosBrowserUrl, logoUrl } = createHelpers(req, res)
+    const { frontend, kratosBrowserUrl, logoUrl, faviconUrl, faviconType } =
+      createHelpers(req, res)
+    res.locals.faviconUrl = faviconUrl
+    res.locals.faviconType = faviconType
     const initFlowUrl = getUrlForFlow(
       kratosBrowserUrl,
       "recovery",

diff --git a/views/layouts/auth.hbs b/views/layouts/auth.hbs
@@ -1,4 +1,4 @@
-<html lang='en'>
+<html lang="en">
   <head>
     {{> standard_headers}}
     <link type="text/css" rel='stylesheet' href="auth-layout.css" />

diff --git a/views/partials/standard_headers.hbs b/views/partials/standard_headers.hbs
@@ -1,5 +1,5 @@
 <meta content="width=device-width, initial-scale=1" name="viewport" />
-<link rel="icon" type="image/png" href="favico.png" />
+<link rel="icon" href="{{{faviconUrl}}}" type="{{{faviconType}}}" />
 <meta charset="utf-8" />
 <title>{{projectName}}</title>
 {{! CSS Reset}}