im new to this and spent all my time trying to figure out how to build a way to generate jwt tokens - given the understanding that you need them for user 'signed in' status.

i used fastapi, and when i login/register using my app, i now get a token, and 'bearer':

{access_token: 'super long string', token_type: 'bearer'}

how do i use this to show another view/page/component? what is the process? is there some sort of decoder? all the videos/tutorials i see are focused on how to get it using node or other means, but i already have it...

CodePudding user response：

You will have to pass this token in your headers in order to access the API. Consider the following Axios js example:

var axios = require('axios');

var config = {
  method: 'get',
  url: `http://${<your_api_url>}/v1/users/`,
  headers: { 
    'Authorization': `${<token_type>} ${<access_token>}`
  }
};

axios(config)
.then(function (response) {
  console.log(JSON.stringify(response.data));
})
.catch(function (error) {
  console.log(error);
});

CodePudding user response：

This is what I did:

Step 1 - set the state for my parent page:

  const [jwtholder, setJwtHolder] = useState('non-bearer')
  const [jwttoken, setJwtToken] = useState('');

  const mainprops = {
    // session,
    jwtholder,
    setJwtHolder,
    jwttoken,
    setJwtToken,
    visitorType,
    setVisitorType
  };

Step 2 - adjust the conditional rendering in the parent page, and pass the states:

  else if (jwtholder=='bearer' && visitorType =='buyside') {
    return(
      <div>
        <Buyside {...mainprops}/>
      </div>
    )}
  else if (jwtholder=='bearer' && visitorType =='sellside') {
    return(
      <div>
        <Sellside {...mainprops}/>
      </div>
    )}
  };

Step 3 - pass those main props through the formik component:

        onSubmit={ (values, {setSubmitting, resetForm} ) => {
            setTimeout(() => {
                _handleLogin({mainprops, values});
                resetForm();
                setSubmitting(false);
        }, 1000)
        }}

Step 4 - use the handler to pass the request, and adjust the parent state:

export default async function _handleSubmit(mainprops,creds) {        
        if (creds.api == 'register'){
        var publish_api = 'http://localhost:8007/register/'; //fastapi
        }
        else if (creds.api =='login') {publish_api = 'http://localhost:8007/login/';}//fastapi

        const requestOptions = {
                        method: 'POST', // *GET, POST, PUT, DELETE, etc.
                        mode: 'cors', // no-cors, *cors, same-origin
                        cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
                        credentials: 'same-origin', // include, *same-origin, omit
                        headers: {
                        'Content-Type': 'application/json',
                        // 'Content-Type': 'application/x-www-form-urlencoded',
                        },
                        body: JSON.stringify(creds.Data)
                };
        //wait for the promise to come back:
        let response = await fetch(publish_api, requestOptions);
        let authorization = await response.json()
        mainprops.setJwtHolder(authorization.token_type);
        mainprops.setJwtToken(authorization.access_token);
        mainprops.setVisitorType('buyside')
        // publish parses JSON response into native JavaScript objects
        }

Obviously there are a few components in between.

When I make any future requests to other APIs, I'll include that jwttoken in the header. (I'm not sure why I repeat the word token here.)

AND add a conditional for a 401 response to change the jwtholder state.