https://github.com/gethinode/mod-hanko
A Hugo module to add authentication powered by Hanko to your Hinode site
https://github.com/gethinode/mod-hanko
Last synced: 28 days ago
JSON representation
A Hugo module to add authentication powered by Hanko to your Hinode site
- Host: GitHub
- URL: https://github.com/gethinode/mod-hanko
- Owner: gethinode
- License: mit
- Created: 2025-08-06T02:47:56.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-10-03T07:30:47.000Z (9 months ago)
- Last Synced: 2025-10-03T09:23:05.164Z (9 months ago)
- Language: HTML
- Homepage:
- Size: 817 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Hinode Module - Hanko
A Hugo module to add authentication powered by Hanko to your Hinode site
## About
Hinode is a clean blog theme for [Hugo][hugo], an open-source static site generator. Hinode is available as a [template][repository_template], and a [main theme][repository]. This repository maintains a Hugo module to add authentication powered by [Hanko](https://hanko.io) to a Hinode site. Visit the Hinode documentation site for addtional [installation instructions][hinode_docs]. This module requires a Hanko account, check out the [Hanko docs](https://docs.hanko.io/setup-hanko-cloud) to get you started.
## Contributing
This module uses [semantic-release][semantic-release] to automate the release of new versions. The package uses `husky` and `commitlint` to ensure commit messages adhere to the [Conventional Commits][conventionalcommits] specification. You can run `npx git-cz` from the terminal to help prepare the commit message.
## Configuration
A login template is available in the `layouts` folder, which is automatically mounted into your site. You can reference this template by setting `layout: login` in the frontmatter of your content page. When the parameter `authenticate` is set to true, the login page will include the [Hanko Auth Component](https://docs.hanko.io/guides/hanko-elements/auth-component). The [Login Component](https://docs.hanko.io/guides/hanko-elements/login-component) is included instead. For example, create a login page `content/login.md` with the following content.
```yml
---
title: Login
description: Login page
layout: login
params:
authenticate: false
---
```
This module supports the following parameters (see the section `params.modules` in `config.toml`):
| Setting | Default | Description |
|---------------------------|---------|-------------|
| endpoint | | Hanko API URL, such as `https://f4****-4802-49ad-8e0b-3d3****ab32.hanko.io`. Check the [Hanko console](https://cloud.hanko.io/) to retrieve the value. |
| login-redirect | | Redirect destination after a successful login, e.g. `/` to redirect to the site's homepage. |
| logout-redirect | | Redirect destination after a successful logout, e.g. `/login/` to redirect to the login page. |
| timeout-redirect | | Redirect destination when the session has expired, e.g. `/login/` to redirect to the login page. A modal dialog is shown to confirm the redirect. |
When using Content Security Policies, be sure to add the endpoint to the `connect-src` safelist. For example, the following configuration in your site parameters will enable connections to the example Hanko API URL.
```toml
[modules.hanko.csp]
connect-src = [
"f4****-4802-49ad-8e0b-3d3****ab32.hanko.io"
]
```
## Session Lifecycle Events
The module dispatches `CustomEvent` notifications on `document` at key
points in the Hanko session lifecycle so consumers can run additional
cleanup or bootstrap logic without forking the module. All events are
non-cancelable and carry no `detail` payload — listeners are notifications,
not interceptors. Any async work a listener kicks off (`fetch` with
`keepalive`, etc.) must outlive the subsequent redirect on its own.
| Event | Fires when |
|------------------------|----------------------------------------------------------------------------|
| `hanko:sessionCreated` | A new Hanko session was established, before redirect to `login-redirect`. |
| `hanko:sessionExpired` | The session has expired, before the timeout modal is rendered. |
| `hanko:beforeLogout` | The user clicked `#logout-link`, before `hanko.user.logout()` is invoked. |
| `hanko:afterLogout` | Hanko reports a successful logout, before redirect to `logout-redirect`. |
Example — flushing site-specific cookies on logout:
```js
document.addEventListener('hanko:beforeLogout', () => {
fetch('/your-app/logout', { method: 'POST', keepalive: true })
})
document.addEventListener('hanko:sessionExpired', () => {
fetch('/your-app/logout', { method: 'POST', keepalive: true })
})
```
[hugo]: https://gohugo.io
[hinode_docs]: https://gethinode.com
[repository]: https://github.com/gethinode/hinode.git
[repository_template]: https://github.com/gethinode/template.git
[conventionalcommits]: https://www.conventionalcommits.org
[husky]: https://typicode.github.io/husky/
[semantic-release]: https://semantic-release.gitbook.io/