Auth.currentSession 表示沒有當前用戶

Question

我有一個基本的反應應用程序，我正在嘗試使用 aws-amplify 進行身份驗證。 我在 cognito 中設置了一個用戶池。 我能夠將用戶發送到托管的 ui。 用戶可以登錄，但是當我嘗試獲取當前會話時，我收到一條消息說no current user 。

這是我的代碼。

import React, { Component } from 'react';
import './App.css';
import Amplify, { Auth } from 'aws-amplify';
import awsmobile from "./aws-exports";

const auth = {
  AppWebDomain: "funnybusty.auth.us-east-2.amazoncognito.com",
  TokenScopesArray: ["phone", "email", "profile", "openid", "aws.cognito.signin.user.admin"],
  RedirectUriSignIn: "http://localhost:3000",
  RedirectUriSignOut: "http://localhost:3000",
  responseType: "token",
  ClientId: "aaaaa",
  UserPoolId: "aaaa",
};

Amplify.configure(awsmobile);
Auth.configure({ oauth: auth });

class App extends Component {

  componentDidMount() {
    Auth.currentSession()
      .then(data => console.log(data))
      .catch(err => console.log(err));
  }

  click = () => {
    const config = Auth.configure().oauth
    const url = 'https://' + config.AppWebDomain + '/login?redirect_uri=' + config.RedirectUriSignIn + '&response_type=' + config.responseType + '&client_id=' + config.ClientId;
    window.location.assign(url);
  }

  render() {
    return (
      <div className="App">
        <button onClick={this.click}>
          Sign in with AWS
          </button>
      </div>
    );
  }
}

export default App;

我哪里錯了？

Answer 1

我從未使用過 reactjs，但我注意到一些事情：

1. 您必須使用Hub 模塊來監聽signIn事件。 否則，您將無法取回您的用戶信息。
2. 在您的oauth 配置中，您必須使用http://localhost:3000/定義您的redirectSignIn和redirectSignOut （最后的/很重要，我是通過艱難的方式學到的..）

3. 您可能必須將ClientId和UserPoolId從const auth 中移出，因為 oauth 配置的模式是：

    const oauth = { domain: 'your_cognito_domain', scope: ['phone', 'email', 'profile', 'openid', 'aws.cognito.signin.user.admin'], redirectSignIn: 'http://localhost:3000/', redirectSignOut: 'http://localhost:3000/', responseType: 'code' // or token };

有關更多信息，您可以查看文檔中提供的完整示例： https : //aws-amplify.github.io/docs/js/authentication#make-it-work-in-your-app

Answer 2

原來這是我代碼中的一個微妙錯誤。 這條線，

Auth.configure({ oauth: auth });

真的應該是這個樣子。

Auth.configure({
    Auth: {
      oauth: auth,
    }
  })

文檔對此不太清楚，所以我想把它留在這里供未來的谷歌員工使用。

正如我在這里看到的那樣，我一直在關注文檔，但文檔也在這里提到了正確的方法。

我不確定這是否是文檔中的某種錯誤，但確實令人困惑。 希望這對其他人有幫助。

Answer 3

我知道這是一個舊線程，但我會回答其他有此問題的人。

我讀到在componentDidMount()中調用Auth.currentSession()並不是一個好的做法。 嘗試在異步函數中調用它並將await放在Auth.currentSession()之前。

例子 ：

import { withAuthenticator } from 'aws-amplify-react'
import Amplify, { Auth } from 'aws-amplify';
Amplify.configure(aws_exports);

class App extends Component {
  
    constructor(props) {
        super(props);

        this.state = {
            postId: null
        };
    }

async example() {

    
        let user = await Auth.currentSession().then(data => 
        console.log(data));
    

  }


render() {
        return (
          <div className="App">
                <h5 className="card-header">Simple POST Request</h5>
                <div className="card-body">

                </div>

                <button onClick={this.example}>
            Req1!
            </button>

            </div>


        );
    }
}