CODEWITHSUNDEEP
reactjsreact-nativeamazon-cognito
Dave A
Dave A

Reputation: 11

Integrating AWS Cognito with ReactJS basic app

I'm trying to learn ReactJS to which I'm new, albeit pretty proficient with intermediate AWS architecture. I've created a very basic app as I find my way around - the next thing I want to do is protect all routes with authentication. I've setup AWS Cognito correctly, the problem comes at the coding side. I've trawled a number of web resources (including AWS) which seem to be outdated. I've then tried ChatGPT/Gemini/Co-pilot to try and work through the issues - to no avail! Can anyone guide me on where I may be going wrong, I'm sure it's a basic error I just can't replicate against previous questions/documentation. I have installed via npm: oidc-client-ts react-oidc-context aws-amplify @aws-amplify/ui-react

aws-exports.js:

const awsconfig = {
    Auth: {
        region: 'eu-west-2',
        userPoolId: 'eu-west-***********',
        userPoolWebClientId: '7f3********************b3',
        mandatorySignIn: true,
    },
    oauth: {
        domain: 'eu-west-*******.auth.eu-west-2.amazoncognito.com',
        scope: ['email', 'openid', 'profile'],
        redirectSignIn: 'http://localhost:5178/',
        redirectSignOut: 'http://localhost:5178/',
        responseType: 'code' // or 'token', depending on your configuration
    }
};

export default awsconfig;

main.jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import { Amplify, Auth } from 'aws-amplify';
import awsconfig from './aws-exports';

// Configure Amplify
Amplify.configure(awsconfig);
Auth.configure(awsconfig);

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

App.jsx

import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import './App.css';
import Home from './pages/Home';
import Stats from './pages/Stats';
import Predictions from './pages/Predictions';
import CompareOdds from './pages/CompareOdds';
import React from 'react';
import { withAuthenticator } from '@aws-amplify/ui-react';

function App() {
  return (
    <Router>
      <div>
        {/* Navigation Menu */}
        <nav className="navigation-menu">
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/stats">Stats</Link></li>
            <li><Link to="/predictions">Predictions</Link></li>
            <li><Link to="/compare-odds">Compare Odds</Link></li>
          </ul>
        </nav>

        {/* Page Content */}
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/stats" element={<Stats />} />
          <Route path="/predictions" element={<Predictions />} />
          <Route path="/compare-odds" element={<CompareOdds />} />
        </Routes>
      </div>
    </Router>
  );
}

export default withAuthenticator(App);

In console I get the following error:

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/aws-amplify.js?v=dba6ac17' does not provide an export named 'Auth'

I'd be really grateful for any help!

Upvotes: 0

Views: 156

Answers (1)

Sobowale Bukola
Sobowale Bukola

Reputation: 361

This seems like a version problem. If you are on version 6+, you don't have to do Auth.configure(awsconfig) anymore as it is now redundant.

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import { Amplify } from 'aws-amplify';
import awsconfig from './aws-exports';

// Configure Amplify
Amplify.configure(awsconfig);
// The Auth.configure() is no longer needed in v6, as it's handled by Amplify.configure()

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

This should solve your issue. Kindly share any other subsequent issues in the comment

Upvotes: 0

Related Questions