Add to your Cargo.toml
:
yew-oauth2 = "0.7"
By default, the router
integration is disabled, you can enable it using:
yew-oauth2 = { version = "0.7", features = ["router"] }
OpenID Connect requires an additional dependency and can be enabled using the feature openid
.
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:
-
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.
-
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 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.