slyedoc/yew-oauth2

General purpose OAuth2 component for Yew

OAuth2 component for Yew

Add to your Cargo.toml:

yew-oauth2 = "0.4"

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

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

OpenID Connect

Starting with version 0.2.0, this crate also supports Open ID Connect. That should be just an extension on top of OAuth2, but the reality is more complicated.

In order to use this, a different crate is required in the background. That crate also has a dependency on ring, which uses a lot of C code, which is not available on WASM.

That is why this functionality is gated by the feature openid. When you enable this feature, for the time being, you will also need to use the patched version of openidconnect, by adding the following to your Cargo.toml:

[dependencies]
# YES, you need to add this additionally to your application!
openidconnect = { version = "2.2", default-features = false, features = ["reqwest", "rustls-tls", "rustcrypto"] }

[patch.crates-io]
openidconnect = { git = "https://github.com/ctron/openidconnect-rs", rev = "6ca4a9ab9de35600c44a8b830693137d4769edf4" }

Also see: ramosbugs/openidconnect-rs#58

Examples

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

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

impl Component for MyApplication {
    fn view(&self, ctx: &Context<Self>) -> Html {
        let login = ctx.link().callback_once(|_: MouseEvent| {
            OAuth2Dispatcher::<Client>::new().start_login();
        });
        let logout = ctx.link().callback_once(|_: MouseEvent| {
            OAuth2Dispatcher::<Client>::new().logout();
        });

        html!(
            <OAuth2
                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(),
                    }
                }
                >
                <Failure><FailureMessage/></Failure>
                <Authenticated>
                    <p> <button onclick={logout}>{ "Logout" }</button> </p>
                    <ul>
                        <li><RouterAnchor<AppRoute> route={AppRoute::Index}> { "Index" } </RouterAnchor<AppRoute>></li>
                        <li><RouterAnchor<AppRoute> route={AppRoute::Component}> { "Component" } </RouterAnchor<AppRoute>></li>
                        <li><RouterAnchor<AppRoute> route={AppRoute::Function}> { "Function" } </RouterAnchor<AppRoute>></li>
                    </ul>
                    <Router<AppRoute>
                        render = { Router::render(|switch: AppRoute| { match switch {
                                AppRoute::Index => html!(<p> { "You are logged in"} </p>),
                                AppRoute::Component => html!(<ViewAuthInfoComponent />),
                                AppRoute::Function => html!(<ViewAuthInfoFunctional />),
                        }})}
                    />
                </Authenticated>
                <NotAuthenticated>
                    <Router<AppRoute>
                        render = { Router::render(move |switch: AppRoute| { match switch {
                                AppRoute::Index => html!(
                                    <p> { "You need to log in" } <button onclick={login.clone()}>{ "Login" }</button> </p>
                                ),
                                _ => html!(<LocationRedirect logout_href="/" />),
                        }})}
                    />
                </NotAuthenticated>
            </OAuth2>
        )
    }
}

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.