anssip / yew-oauth2

General purpose OAuth2 component for Yew

OAuth2 component for Yew

Add to your Cargo.toml:

yew-oauth2 = "0.5"

By default, the router integration is disabled, you can enable it using:

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

OpenID Connect

Starting with version 0.2.0, this crate also supports Open ID Connect. This used to be a bit complicated due to the lacking support of WASM for openidconnect-rs.

Starting with version 0.6.0-alpha.1, it is possible to use openidconnect-rs version 3, which has this issue solved! The old patch is no longer required.

Examples

A quick example 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 {
    client_id: "my-client".into(),
    auth_url: "https://my-sso/auth/realms/my-realm/protocol/openid-connect/auth".into(),
    token_url: "https://my-sso/auth/realms/my-realm/protocol/openid-connect/token".into(),
  };

  html!(
    <OAuth2 config={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 = {
    let agent = agent.clone();
    Callback::from(move |_| {
      let _ = agent.start_login();
    })
  };
  let logout = Callback::from(move |_| {
    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

A complete example, hiding everything behind a "login" page, and revealing the content once the user logged in.

Use with either OpenID Connect or OAuth2.

yew-oauth2-redirect-example

A complete example, showing the full menu structure, but redirecting the user automatically to the login server when required.

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.