将 AWS Cognito 与 ReactJS 基本应用程序集成

Question

我正在尝试学习 ReactJS，虽然我对中级 AWS 架构相当精通，但我还是个新手。当我找到解决办法时，我创建了一个非常基本的应用程序 - 我想做的下一件事是通过身份验证保护所有路由。 我已经正确设置了 AWS Cognito，问题出在编码方面。我搜索了许多似乎已经过时的网络资源（包括 AWS）。然后我尝试了 ChatGPT/Gemini/Co-pilot 来尝试解决这些问题 - 但没有成功！任何人都可以指导我可能出错的地方，我确信这是一个基本错误，我无法根据以前的问题/文档进行复制。 我已经通过 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-2_*********',
        userPoolWebClientId: '****************',
        mandatorySignIn: true,
    },
    oauth: {
        domain: 'https://eu-west-**********.auth.eu-west-2.amazoncognito.com',
        scope: ['email', 'openid', 'profile'],
        redirectSignIn: 'http://localhost:3000/',
        redirectSignOut: 'http://localhost:3000/',
        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>,
)

应用程序.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);

在控制台中我收到以下错误：

未捕获的语法错误：请求的模块“/node_modules/.vite/deps/aws-amplify.js?v=dba6ac17”不提供名为“Auth”的导出

如果有任何帮助，我将非常感激！

Answer 1

这似乎是版本问题。 如果您使用的是

6+

版本，则无需再执行

Auth.configure(awsconfig)

，因为它现在是多余的。

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>,
)

这应该可以解决您的问题。请在评论中分享任何后续问题