How can I use oauth2 response to make requests to the api guarded by it?

Question

I am trying to use Authorization Code scheme with oauth2.

How can I use the response from app backend to make new requests to the actual api (yahoo-fantasy) guarded by it? I have no idea how I can access the actual response on the code side, please note that this is a question about implementation, not the concept.

I have the following structure:

$ tree src

src
├── components
│   ├── app.rs
│   └── login.rs
├── components.rs
└── main.rs

with the following files:

// ./src/components/app.rs

use yew::{function_component, html};

use crate::components::login::Login;

#[function_component(App)]
pub fn app() -> Html {
    html! {
        <>
            <Login/>
        </>
    }
}

// ./src/components/login.rs
use yew::prelude::*;
use yew_oauth2::oauth2::*;
use yew_oauth2::prelude::*; // use `openid::*` when using OpenID connect

pub struct Login;

impl Component for Login {
    type Message = ();
    type Properties = ();

    fn create(ctx: &Context<Self>) -> Self {
        Self
    }

    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();
        });

        let config = Config {
            client_id: "<my-yahoo-client-id>".to_string(),
            auth_url: "https://api.login.yahoo.com/oauth2/request_auth".into(),
            token_url: "<my-backend-end-point-for-oauth2>".to_string(),
        };

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

// ./src/components.rs
pub mod app;
pub mod login;

// ./src/main.rs
mod components;

fn main() {
    yew::start_app::<components::app::App>();
}

which I'm developing using:

trunk serve

When the login button is pushed, app backend responds with the following body:

{
  "access_token": "<access_token-value>",
  "expires_in": 3600,
  "refresh_token": "<refresh_token-value>",
  "token_type": "bearer"
}

Further see the project dependencies:

# ./Cargo.toml
[package]
edition = "2021"
name = "my_project"
version = "0.1.0"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
dotenv_codegen = "0.15.0"
gloo-net = "0.2.5"
log = "0.4.17"
reqwest = "0.11.13"
serde = "1.0.149"
wasm-bindgen-futures = "0.4.33"
wasm-logger = "0.2.0"
yew = "0.19.3"
yew-oauth2 = "0.4.0"

Further note, I've read the all the answers on the question What is the OAuth 2.0 Bearer Token exactly?, and I could not make a progress and/or have any insight that it is related to my question directly.

How can I use oauth2 response to make requests to the api guarded by it?

0 Answers0