This release introduces support for "Sign in with Apple", several enhancements to streamline Hanko Elements frontend integration, as well as some minor improvements and fixes.
Sign in with Apple
Sign in with Apple is now supported as 3rd-party identity provider option.
Hanko Elements Improvements
All frontend functionalities are now accessible through the hanko-elements package, eliminating the need for a separate installation of the frontend-sdk package. Additionally, a new event system has been introduced, enabling developers to dynamically respond to certain events. For instance, you can now handle events such as session creation, session expiration, and auth flow completion to control user flows, manage JWTs, and more.
- Please take a look at the updated
frontend/elements/README.mdfor a list of the new events and their descriptions. - A new web component
<hanko-events>has been added that doesn't contain any UI elements, but can make integration with the new event features simpler in some cases. - All example apps under
frontend/exampleshave been updated to demonstrate how to integrate the new functionality with certain frontend frameworks.
Migrating from hanko-elements v0.4.x to v0.5.x
- The
register()method exported by@teamhanko/hanko-elementshas changed:
Outdated:
import { register } from "@teamhanko/hanko-elements";
register({ ...options });New:
import { register } from "@teamhanko/hanko-elements";
// The `register` function now returns an instance of the `frontend-sdk`, therefore you
// don't need to install or import the `@teamhanko/hanko-frontend-sdk` package.
const { hanko } = await register("https://your-api.hanko.io/", { ...options });
// Get the current user
const user = await hanko.user.getCurrent();- The "@teamhanko/hanko-elements" package has new export members, e.g.
Hanko, the class declaration of the frontend-sdk:
import { Hanko } from "@teamhanko/hanko-elements";
// You can call `new Hanko()` to create a new `frontend-sdk` instance.
const hanko = new Hanko("https://your-api.hanko.io/");- Because you now provide the API URL with the
register()function, you don't need to pass the value into the web components:
Outdated:
<html>
<hanko-auth api="https://your-api.hanko.io/"></hanko-auth>
<hanko-profile api="https://your-api.hanko.io/"></hanko-profile>
</html>New:
<html>
<hanko-auth></hanko-auth>
<hanko-profile></hanko-profile>
</html>- You can now add callbacks to certain events via the
frontend-sdk:
import { register } from "@teamhanko/hanko-elements";
const { hanko } = await register("https://your-api.hanko.io/");
// Add a callback to be executed when the user is logged in and ready to be redirected.
const removeEventListener = hanko.onAuthFlowCompleted(() => {
// Your code...
})
// The `removeEventListener()` function removes the event listener
removeEventListener();- Bind events directly on the
<hanko-auth>,<hanko-profile>and the new<hanko-events>element.
<html>
<hanko-auth id="auth"></hanko-auth>
<script>
document.getElementById("auth").addEventListener("onAuthFlowCompleted", () => {
// Your code...
});
</script>
</html>What's Changed
- fix: differentiate between Operating System of the hanko-backend and … by @like-a-bause in #724
- docs(thirdparty): rework thirdparty guides by @lfleischmann in #737
- feat(passcode): include passcode in email subject by @lfleischmann in #749
- feat(thirdparty): sign in with apple by @lfleischmann in #748
- Session events by @bjoern-m in #725
- Fix only return users with email by @FreddyDevelop in #758
- fix: User Object is deprecated by @bjoern-m in #774
- Feat additional confirmation steps by @bjoern-m in #666
- fix: set the auth cookie even when x-session-lifetime is not present by @bjoern-m in #778
- remove divider-display variable by @bjoern-m in #791
Full Changelog: backend/v0.6.0...backend/v0.7.0