Crate yew_oauth2

Yew components to implement OAuth2 and OpenID Connect logins.

OAuth2 or Open ID Connect

This crate supports both plain OAuth2 and Open ID Connect (OIDC). OIDC layers a few features on top of OAuth2 (like logout URLs, discovery, …).

In order to use OIDC, you will need to enable the feature openid.

Example

NOTE: Also see the readme for more examples.

The following is a basic example:

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>
    </>
  )
}

Modules

agent

The agent, working in the background to manage the session and refresh tokens.

components

Components used when rendering HTML

config

Configuration

context

The Authentication Context

hook

Hooks for Yew

oauth2

Common used OAuth2 features

openidopenid

Common used Open ID Connect features

prelude

The prelude, includes most things you will need.