AWS Cognito UI not allowing navigation after authentication

31 Views Asked by At

I'm learning with a basic ReactJS app consisting of a handful of pages. I want the homepage to have authentication and I've successfully integrated and configured AWS Cognito. The problem is, once I've successfully authenticated, I'm stuck in a 'Welcome <userid>' with the option to sign out. In AWS I have configured the callback URL to http://localhost/questionnaire. Even manually entering URLs keeps me stuck on the welcome screen.

I have tried duplicating the app without Cognito to test routes, they all work as expected. Code is as follows:

App.js

import logo from './logo.svg';
import './App.css';
import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Questionnaire from './Questionnaire';
import Contact from './Contact';
import Privacy from './Privacy';
import AboutUs from './AboutUs';
import Layout from './Layout';
import './App.css';
import {Amplify} from 'aws-amplify';
import awsExports from "./aws-exports";
import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
import { Auth } from "aws-amplify";
import { useNavigate } from 'react-router-dom';

// Configure Amplify in index file or root file
Amplify.configure({
  Auth: {
    region: awsExports.REGION,
    userPoolId: awsExports.USER_POOL_ID,
    userPoolWebClientId: awsExports.USER_POOL_APP_CLIENT_ID
  }
})

function App() {
<Router>
  const navigate = useNavigate();
  const handleClick = () =>
  // Now you can navigate programmatically to other pages using navigate
  navigate('/questionnaire');
  </Router>
  return (
      <Authenticator>
        {({ signOut, user }) => (
            <div>
              <p>Welcome {user.username}</p>
              <button onClick={signOut}>Sign out</button>
            </div>
        )}
      </Authenticator>
  );
}


export default App;

aws-export.js just contains the creds which are working as expected.

The useNavigate feature was added as I was trying to search for a solution - the problem existed before adding that.

I don't think any of the other modules are relevant but the app structure is as follows:

App structure

0

There are 0 best solutions below