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:
