backend/v0.7.0

teamhanko/hankobackend/v0.7.0May 31, 2023by FlxMgdnz

AI Summary

Introduces 'Sign in with Apple' support, overhauls the frontend SDK integration with a new event system, and updates example apps to use the new package structure.

Key Highlights

Added 'Sign in with Apple' as a third-party identity provider.
Introduced a new event system for handling session creation, expiration, and flow completion.
Added a new `<hanko-events>` web component for event handling.
API URL parameter removed from web components; now passed to the register function.

Breaking Changes

Changed 'register()' method to return a frontend-sdk instance.
Web components no longer require the 'api' attribute.
Removed legacy event types and updated export members.

New Features

Sign in with Apple
Event system
New web components
SDK instance export

Full Release Notes

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.md` for 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/examples` have 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-elements` has changed:

Outdated:
```javascript
import { register } from "@teamhanko/hanko-elements";

register({ ...options });
```

New:
```javascript
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:

```javascript
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
<html>
  <hanko-auth api="https://your-api.hanko.io/"></hanko-auth>
  <hanko-profile api="https://your-api.hanko.io/"></hanko-profile>
</html>
```

New: 
```html
<html>
  <hanko-auth></hanko-auth>
  <hanko-profile></hanko-profile>
</html>
```

- You can now add callbacks to certain events via the `frontend-sdk`:

```javascript
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
<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 https://github.com/teamhanko/hanko/pull/724
* docs(thirdparty): rework thirdparty guides by @lfleischmann in https://github.com/teamhanko/hanko/pull/737
* feat(passcode): include passcode in email subject by @lfleischmann in https://github.com/teamhanko/hanko/pull/749
* feat(thirdparty): sign in with apple by @lfleischmann in https://github.com/teamhanko/hanko/pull/748
* Session events by @bjoern-m in https://github.com/teamhanko/hanko/pull/725
* Fix only return users with email by @FreddyDevelop in https://github.com/teamhanko/hanko/pull/758
* fix: User Object is deprecated by @bjoern-m in https://github.com/teamhanko/hanko/pull/774
* Feat additional confirmation steps by @bjoern-m in https://github.com/teamhanko/hanko/pull/666
* fix: set the auth cookie even when x-session-lifetime is not present by @bjoern-m in https://github.com/teamhanko/hanko/pull/778
* remove divider-display variable by @bjoern-m in https://github.com/teamhanko/hanko/pull/791

**Full Changelog**: https://github.com/teamhanko/hanko/compare/backend/v0.6.0...backend/v0.7.0