OAuth2 (and OIDC) component for Yew

Add to your Cargo.toml:

yew-oauth2 = "0.12"

By default, the yew-nested-router integration for yew-nested-router is disabled. You can enable it using:

yew-oauth2 = { version = "0.12", features = ["yew-nested-router"] }

OpenID Connect

OpenID Connect requires an additional dependency and can be enabled using the feature openid.

Examples

A quick example of how to use it (see below for more complete examples):

use yew::prelude::*;
use yew_oauth2::prelude::*;
use yew_oauth2::oauth2::*; // use `openid::*` when using OpenID connect

#[function_component(MyApplication)]
fn my_app() -> Html {
    let config = Config::new(
        "my-client",
        "https://my-sso/auth/realms/my-realm/protocol/openid-connect/auth",
        "https://my-sso/auth/realms/my-realm/protocol/openid-connect/token"
    );

    html!(
    <OAuth2 {config}>
      <MyApplicationMain/>
    </OAuth2>
  )
}

#[function_component(MyApplicationMain)]
fn my_app_main() -> Html {
    let agent = use_auth_agent().expect("Must be nested inside an OAuth2 component");

    let login = use_callback(agent.clone(), |_, agent| {
        let _ = agent.start_login();
    });
    let logout = use_callback(agent, |_, agent| {
        let _ = agent.logout();
    });

    html!(
    <>
      <Failure><FailureMessage/></Failure>
      <Authenticated>
        <button onclick={logout}>{ "Logout" }</button>
      </Authenticated>
      <NotAuthenticated>
        <button onclick={login}>{ "Login" }</button>
      </NotAuthenticated>
    </>
  )
}

This repository also has some complete examples:

yew-oauth2-example

Use with either OpenID Connect or OAuth2.

yew-oauth2-redirect-example

Use with either OpenID Connect or OAuth2.

Testing

Testing the example projects locally can be done using a local Keycloak instance and trunk.

Start the Keycloak instance using:

podman-compose -f develop/docker-compose.yaml up

Then start trunk with the local developer instance:

cd yew-oauth2-example # or yew-oauth2-redirect-example
trunk serve

And navigate your browser to http://localhost:8080.

NOTE: It is important to use http://localhost:8080 instead of e.g. http://127.0.0.1:8080, as Keycloak is configured by default to use http://localhost:* as a valid redirect URL when in dev-mode. Otherwise, you will get an "invalid redirect" error from Keycloak.