I have a /signup component with just a button that links to my congito hosted UI. Signup and login is working in terms of adding a user to the userpool and confirming email. My redirect url is https://localhost:3000/dashboard/ I only want logged in users to be able to see the dashboard.

Of course after signup or login I am being redirected to http://localhost:3000/dashboard?code=3db693ac-b1f4-4723-b4de-d13324392ed2 , where this code param is an oauth code to be exchanged for access tokens. Cognito does not seem to be handling this oauth code exchange automatically under the hood.

I know I am supposed to make a request with that auth code according to https://docs.aws.amazon.com/cognito/latest/developerguide/token-endpoint.html to ‘https://.auth.eu-west-1.amazoncognito.com/oauth2/token. My problem is NOT how to write this reqest

My problem is getting that post request to execute and knowing where to write it. It cannot be executed/written in the /signup route because the oauth code param is only given after signup or login after clicking the hosted UI link when the url won’t be /signup .

I cannot write this request in /dashboard because I cannot get to dashboard in the first place to execute it (which this problem is preventing) due to the auth code param itself in the url. I am also unsure whether to write it in a useEffect hook which is what I currently have as well as what to do with the response token after.

I am not sure how to handle it in the backend or whether that is even a valid approach because I cannot execute that post to the flask backend to make the token post because of hte reasons above. Currently I think the front end handling is the way/

My request code I need to execute is below. My AWS userpool is a no secret app client and my app is a react flask web app.

useEffect(() => {
setClientId(cognito_config['aws_user_pools_web_client_id']);

const authCodeSignUrl = 'https://waveover-dev.auth.eu-west-1.amazoncognito.com/oauth2/token'

const handleCodeParam = () => {

    const urlParams = new URLSearchParams(window.location.search);
    const rawCode = urlParams.get('code');
    const authCode =  String(rawCode)

    if (authCode) {
        console.log('auuthCode is', authCode)

        axios.post(authCodeSignUrl, null, {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
              },
            params: {
                grant_type: 'authorization_code',
                client_id: cognito_config['aws_user_pools_web_client_id'],
                // client_secret: 'xxxxx replace with your secret xxxxxx',
                code: authCode,
                redirect_uri: cognito_config['oauth']['redirectSignIn']
            }
            }).then(response => {
                    const newAccessToken = response.data.access_token;
            }).catch(error => {
                    console.log('Nae access', error);
            });
    }
};

handleCodeParam();
}, []);

I tried writing the post reqeust inside dashboard and signup components

function App() {
  return (
    <BrowserRouter> 
      <div className="App">
        <Routes>
          <Route path="/signup" element={<Signup />} />
          <Route path="/dashboard" element={<Dashboard />} />
          {/*<Route path="/argument" component={ArgumentPage} />*/}  
          {/*<Route path="/response" component={ResponsePage} />*/}  
        </Routes>
      </div>
    </BrowserRouter>
  );
}
export default App;

Again my signup component is below where the button with a link to the hosted UI. I am just testing this for manual email and pw login/signup at the moment not Google signup.

return (
    <div>
        <button onClick={() => signUpWithGoogle('Google')}>Sign Up</button>
    </div>
);