Fatal编程技术网
  • amazon-web-services/
  • Amazon web services aws amplify withAuth0 HOC:未配置auth0客户端错误

Amazon web services aws amplify withAuth0 HOC:未配置auth0客户端错误

amazon-web-services

Amazon web services aws amplify withAuth0 HOC:未配置auth0客户端错误,amazon-web-services,auth0,aws-amplify,Amazon Web Services,Auth0,Aws Amplify,在下面的文档中添加一个额外的登录按钮时遇到了一些问题，该按钮适用于现有项目 我已经添加了config对象，并在auth0平台上创建了应用程序，并将cognito配置为将其用作联合登录，但是使用AWS Amplify withAuth0 HOC让按钮工作似乎并没有如预期的那样工作。不是这样，就是文件不清楚 单击按钮时出现以下错误：未配置auth0客户端 index.js import "@babel/polyfill"; import React from 'react'; import Reac

在下面的文档中添加一个额外的登录按钮时遇到了一些问题，该按钮适用于现有项目

我已经添加了config对象，并在auth0平台上创建了应用程序，并将cognito配置为将其用作联合登录，但是使用AWS Amplify withAuth0 HOC让按钮工作似乎并没有如预期的那样工作。不是这样，就是文件不清楚

单击按钮时出现以下错误：
未配置auth0客户端

index.js

import "@babel/polyfill";
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import AppWithAuth from './appWithAuth';
import * as serviceWorker from './serviceWorker';

import { Provider } from 'react-redux';
import { createStore } from 'redux'
import rootReducer from './reducers'

const store = createStore(rootReducer);

ReactDOM.render(
  <Provider store={store}>
    <AppWithAuth />
  </Provider>,
  document.getElementById('root')
);


serviceWorker.unregister();

import React from "react";
import { SignIn, SignUp, forgotPassword, Greetings } from "aws-amplify-react";
import { default as CustomSignIn } from "./components/login";
import App from "./App";
import { Authenticator } from "aws-amplify-react/dist/Auth";

/*global AWS_CONFIG */
/*eslint no-undef: "error"*/
const config = AWS_CONFIG;

class AppWithAuth extends React.Component {
  render() {
    return (
      <div>
        <Authenticator hide={[SignIn, SignUp, forgotPassword, Greetings]} amplifyConfig={config}>
          <CustomSignIn />
            <App />
        </Authenticator>
      </div>
    );
  }
}

export default AppWithAuth;

import React from "react";
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import Link from '@material-ui/core/Link';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import { withStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
import { orange } from '@material-ui/core/colors';
import { SignIn } from "aws-amplify-react";
import ButtonAuth0 from "./../buttons/auth0"

const styles = theme => ({
  '@global': {
    body: {
      backgroundColor: theme.palette.common.white,
    },
  },
  paper: {
    marginTop: theme.spacing(8),
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center'
  },
  form: {
    width: '100%', // Fix IE 11 issue.
    marginTop: theme.spacing(1)
  },
  cognito: {
    margin: theme.spacing(3, 0, 2),
    color: theme.palette.getContrastText(orange[600]),
    backgroundColor: orange[600],
    '&:hover': {
      backgroundColor: orange[700]
    }
  }
});

class CustomSignIn extends SignIn {
  constructor(props) {
    super(props);
    this._validAuthStates = ["signIn", "signedOut", "signedUp"];
  }

  showComponent(theme) {
    const {classes} = this.props;
    return (
      <Container component="main" maxWidth="xs">
        <CssBaseline />
        <div className={classes.paper}>
          <ButtonAuth0 />
          <Typography component="h1" variant="h5">
            Sign in
          </Typography>
          <form className={classes.form} noValidate>
            <TextField
              variant="outlined"
              margin="normal"
              required
              fullWidth
              id="username"
              label="Username"
              name="username"
              autoFocus
              onChange={this.handleInputChange}
            />
            <TextField
              variant="outlined"
              margin="normal"
              required
              fullWidth
              name="password"
              label="Password"
              type="password"
              id="password"
              onChange={this.handleInputChange}
            />
            <Button
              type="submit"
              fullWidth
              variant="contained"
              color="inherit"
              className={classes.cognito}
              onClick={(event) => super.signIn(event)}
            >
              Sign In With Cognito
            </Button>
            <Grid container>
              <Grid item xs>
                <Link href="#" variant="body2" onClick={() => super.changeState("forgotPassword")}>
                  Reset password?
                </Link>
              </Grid>
              <Grid item>
                <Link href="#" variant="body2" onClick={() => super.changeState("signUp")}>
                  {"Don't have an account? Sign Up"}
                </Link>
              </Grid>
            </Grid>
          </form>
        </div>
      </Container>
    );
  }
}

export default (withStyles(styles)(CustomSignIn));

import React from 'react';
import { withAuth0 } from 'aws-amplify-react';
import Button from '@material-ui/core/Button';
import { red } from '@material-ui/core/colors';
import { withStyles } from '@material-ui/core';
import { Auth } from 'aws-amplify';

const auth0 = {
  "domain": "<...>",
  "clientID": "<...>",
  "redirectUri": "http://localhost:3000",
  "audience": "",
  "responseType": "token id_token", // for now we only support implicit grant flow
  "scope": "openid profile email", // the scope used by your app
  "returnTo": "http://localhost:3000"
};

Auth.configure({
  auth0
});

const styles = theme => ({
  auth0: {
    margin: theme.spacing(3, 0, 2),
    color: theme.palette.getContrastText(red[700]),
    backgroundColor: red[700],
    '&:hover': {
      backgroundColor: red[800]
    }
  }
});

const Auth0Button = (props) => (
  <div>
    <Button
      fullWidth
      variant="contained"
      color="inherit"
      className={props.classes.auth0}
      onClick={props.auth0SignIn}
    >
      Sign In With auth0
    </Button>
  </div>
)

export default withAuth0(withStyles(styles)(Auth0Button));
appWithAuth.js

import "@babel/polyfill";
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import AppWithAuth from './appWithAuth';
import * as serviceWorker from './serviceWorker';

import { Provider } from 'react-redux';
import { createStore } from 'redux'
import rootReducer from './reducers'

const store = createStore(rootReducer);

ReactDOM.render(
  <Provider store={store}>
    <AppWithAuth />
  </Provider>,
  document.getElementById('root')
);


serviceWorker.unregister();

import React from "react";
import { SignIn, SignUp, forgotPassword, Greetings } from "aws-amplify-react";
import { default as CustomSignIn } from "./components/login";
import App from "./App";
import { Authenticator } from "aws-amplify-react/dist/Auth";

/*global AWS_CONFIG */
/*eslint no-undef: "error"*/
const config = AWS_CONFIG;

class AppWithAuth extends React.Component {
  render() {
    return (
      <div>
        <Authenticator hide={[SignIn, SignUp, forgotPassword, Greetings]} amplifyConfig={config}>
          <CustomSignIn />
            <App />
        </Authenticator>
      </div>
    );
  }
}

export default AppWithAuth;

import React from "react";
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import Link from '@material-ui/core/Link';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import { withStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
import { orange } from '@material-ui/core/colors';
import { SignIn } from "aws-amplify-react";
import ButtonAuth0 from "./../buttons/auth0"

const styles = theme => ({
  '@global': {
    body: {
      backgroundColor: theme.palette.common.white,
    },
  },
  paper: {
    marginTop: theme.spacing(8),
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center'
  },
  form: {
    width: '100%', // Fix IE 11 issue.
    marginTop: theme.spacing(1)
  },
  cognito: {
    margin: theme.spacing(3, 0, 2),
    color: theme.palette.getContrastText(orange[600]),
    backgroundColor: orange[600],
    '&:hover': {
      backgroundColor: orange[700]
    }
  }
});

class CustomSignIn extends SignIn {
  constructor(props) {
    super(props);
    this._validAuthStates = ["signIn", "signedOut", "signedUp"];
  }

  showComponent(theme) {
    const {classes} = this.props;
    return (
      <Container component="main" maxWidth="xs">
        <CssBaseline />
        <div className={classes.paper}>
          <ButtonAuth0 />
          <Typography component="h1" variant="h5">
            Sign in
          </Typography>
          <form className={classes.form} noValidate>
            <TextField
              variant="outlined"
              margin="normal"
              required
              fullWidth
              id="username"
              label="Username"
              name="username"
              autoFocus
              onChange={this.handleInputChange}
            />
            <TextField
              variant="outlined"
              margin="normal"
              required
              fullWidth
              name="password"
              label="Password"
              type="password"
              id="password"
              onChange={this.handleInputChange}
            />
            <Button
              type="submit"
              fullWidth
              variant="contained"
              color="inherit"
              className={classes.cognito}
              onClick={(event) => super.signIn(event)}
            >
              Sign In With Cognito
            </Button>
            <Grid container>
              <Grid item xs>
                <Link href="#" variant="body2" onClick={() => super.changeState("forgotPassword")}>
                  Reset password?
                </Link>
              </Grid>
              <Grid item>
                <Link href="#" variant="body2" onClick={() => super.changeState("signUp")}>
                  {"Don't have an account? Sign Up"}
                </Link>
              </Grid>
            </Grid>
          </form>
        </div>
      </Container>
    );
  }
}

export default (withStyles(styles)(CustomSignIn));

import React from 'react';
import { withAuth0 } from 'aws-amplify-react';
import Button from '@material-ui/core/Button';
import { red } from '@material-ui/core/colors';
import { withStyles } from '@material-ui/core';
import { Auth } from 'aws-amplify';

const auth0 = {
  "domain": "<...>",
  "clientID": "<...>",
  "redirectUri": "http://localhost:3000",
  "audience": "",
  "responseType": "token id_token", // for now we only support implicit grant flow
  "scope": "openid profile email", // the scope used by your app
  "returnTo": "http://localhost:3000"
};

Auth.configure({
  auth0
});

const styles = theme => ({
  auth0: {
    margin: theme.spacing(3, 0, 2),
    color: theme.palette.getContrastText(red[700]),
    backgroundColor: red[700],
    '&:hover': {
      backgroundColor: red[800]
    }
  }
});

const Auth0Button = (props) => (
  <div>
    <Button
      fullWidth
      variant="contained"
      color="inherit"
      className={props.classes.auth0}
      onClick={props.auth0SignIn}
    >
      Sign In With auth0
    </Button>
  </div>
)

export default withAuth0(withStyles(styles)(Auth0Button));



从“React”导入React；
从“aws amplify react”导入{登录、注册、放弃密码、问候语}；
从“/components/login”导入{default as CustomSignIn}；
从“/App”导入应用程序；
从“aws放大反应/dist/Auth”导入{Authenticator}；
/*全球自动气象站配置*/
/*eslint无未定义：“错误”*/
常量配置=AWS_配置；
类AppWithAuth扩展了React.Component{
render（）{
返回(
);
}
}
导出默认AppWithAuth；
覆盖amplify中默认登录页的组件 组件/login/index.js

import "@babel/polyfill";
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import AppWithAuth from './appWithAuth';
import * as serviceWorker from './serviceWorker';

import { Provider } from 'react-redux';
import { createStore } from 'redux'
import rootReducer from './reducers'

const store = createStore(rootReducer);

ReactDOM.render(
  <Provider store={store}>
    <AppWithAuth />
  </Provider>,
  document.getElementById('root')
);


serviceWorker.unregister();

import React from "react";
import { SignIn, SignUp, forgotPassword, Greetings } from "aws-amplify-react";
import { default as CustomSignIn } from "./components/login";
import App from "./App";
import { Authenticator } from "aws-amplify-react/dist/Auth";

/*global AWS_CONFIG */
/*eslint no-undef: "error"*/
const config = AWS_CONFIG;

class AppWithAuth extends React.Component {
  render() {
    return (
      <div>
        <Authenticator hide={[SignIn, SignUp, forgotPassword, Greetings]} amplifyConfig={config}>
          <CustomSignIn />
            <App />
        </Authenticator>
      </div>
    );
  }
}

export default AppWithAuth;

import React from "react";
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import Link from '@material-ui/core/Link';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import { withStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
import { orange } from '@material-ui/core/colors';
import { SignIn } from "aws-amplify-react";
import ButtonAuth0 from "./../buttons/auth0"

const styles = theme => ({
  '@global': {
    body: {
      backgroundColor: theme.palette.common.white,
    },
  },
  paper: {
    marginTop: theme.spacing(8),
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center'
  },
  form: {
    width: '100%', // Fix IE 11 issue.
    marginTop: theme.spacing(1)
  },
  cognito: {
    margin: theme.spacing(3, 0, 2),
    color: theme.palette.getContrastText(orange[600]),
    backgroundColor: orange[600],
    '&:hover': {
      backgroundColor: orange[700]
    }
  }
});

class CustomSignIn extends SignIn {
  constructor(props) {
    super(props);
    this._validAuthStates = ["signIn", "signedOut", "signedUp"];
  }

  showComponent(theme) {
    const {classes} = this.props;
    return (
      <Container component="main" maxWidth="xs">
        <CssBaseline />
        <div className={classes.paper}>
          <ButtonAuth0 />
          <Typography component="h1" variant="h5">
            Sign in
          </Typography>
          <form className={classes.form} noValidate>
            <TextField
              variant="outlined"
              margin="normal"
              required
              fullWidth
              id="username"
              label="Username"
              name="username"
              autoFocus
              onChange={this.handleInputChange}
            />
            <TextField
              variant="outlined"
              margin="normal"
              required
              fullWidth
              name="password"
              label="Password"
              type="password"
              id="password"
              onChange={this.handleInputChange}
            />
            <Button
              type="submit"
              fullWidth
              variant="contained"
              color="inherit"
              className={classes.cognito}
              onClick={(event) => super.signIn(event)}
            >
              Sign In With Cognito
            </Button>
            <Grid container>
              <Grid item xs>
                <Link href="#" variant="body2" onClick={() => super.changeState("forgotPassword")}>
                  Reset password?
                </Link>
              </Grid>
              <Grid item>
                <Link href="#" variant="body2" onClick={() => super.changeState("signUp")}>
                  {"Don't have an account? Sign Up"}
                </Link>
              </Grid>
            </Grid>
          </form>
        </div>
      </Container>
    );
  }
}

export default (withStyles(styles)(CustomSignIn));

import React from 'react';
import { withAuth0 } from 'aws-amplify-react';
import Button from '@material-ui/core/Button';
import { red } from '@material-ui/core/colors';
import { withStyles } from '@material-ui/core';
import { Auth } from 'aws-amplify';

const auth0 = {
  "domain": "<...>",
  "clientID": "<...>",
  "redirectUri": "http://localhost:3000",
  "audience": "",
  "responseType": "token id_token", // for now we only support implicit grant flow
  "scope": "openid profile email", // the scope used by your app
  "returnTo": "http://localhost:3000"
};

Auth.configure({
  auth0
});

const styles = theme => ({
  auth0: {
    margin: theme.spacing(3, 0, 2),
    color: theme.palette.getContrastText(red[700]),
    backgroundColor: red[700],
    '&:hover': {
      backgroundColor: red[800]
    }
  }
});

const Auth0Button = (props) => (
  <div>
    <Button
      fullWidth
      variant="contained"
      color="inherit"
      className={props.classes.auth0}
      onClick={props.auth0SignIn}
    >
      Sign In With auth0
    </Button>
  </div>
)

export default withAuth0(withStyles(styles)(Auth0Button));



从“React”导入React；
从“@material ui/core/Button”导入按钮；
从“@material ui/core/CssBaseline”导入CssBaseline；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core/Link”导入链接；
从“@material ui/core/Grid”导入网格；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/styles”导入{withStyles}”；
从“@material ui/core/Container”导入容器；
从“@material ui/core/colors”导入{orange}”；
从“aws放大反应”导入{SignIn}；
从“/。/buttons/auth0”导入ButtonAuth0
常量样式=主题=>({
“@global”：{
正文：{
背景色：theme.palette.common.white，
},
},
论文：{
marginTop：主题。间距（8），
显示：“flex”，
flexDirection:'列'，
对齐项目：“中心”
},
表格：{
宽度：“100%”，//修复IE 11问题。
marginTop：主题。间距（1）
},
cognito：{
边距：主题。间距（3,0,2），
颜色：theme.palette.GetContractText（橙色[600]），颜色为，
背景颜色：橙色[600]，
“&：悬停”：{
背景颜色：橙色[700]
}
}
});
类CustomSignIn扩展了SignIn{
建造师（道具）{
超级（道具）；
此._validAuthStates=[“签名”、“签名输出”、“签名输出”]；
}
showComponent（主题）{
const{classes}=this.props；
返回(
登录
超级签名（活动）}
>
用Cognito登录
super.changeState（“放弃密码”）}>
重置密码？
super.changeState（“注册”）}>
{“没有帐户？注册”}
);
}
}
导出默认值（使用样式（样式）（CustomSignIn））；
按钮组件： 组件/按钮/auht0.js

import "@babel/polyfill";
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import AppWithAuth from './appWithAuth';
import * as serviceWorker from './serviceWorker';

import { Provider } from 'react-redux';
import { createStore } from 'redux'
import rootReducer from './reducers'

const store = createStore(rootReducer);

ReactDOM.render(
  <Provider store={store}>
    <AppWithAuth />
  </Provider>,
  document.getElementById('root')
);


serviceWorker.unregister();

import React from "react";
import { SignIn, SignUp, forgotPassword, Greetings } from "aws-amplify-react";
import { default as CustomSignIn } from "./components/login";
import App from "./App";
import { Authenticator } from "aws-amplify-react/dist/Auth";

/*global AWS_CONFIG */
/*eslint no-undef: "error"*/
const config = AWS_CONFIG;

class AppWithAuth extends React.Component {
  render() {
    return (
      <div>
        <Authenticator hide={[SignIn, SignUp, forgotPassword, Greetings]} amplifyConfig={config}>
          <CustomSignIn />
            <App />
        </Authenticator>
      </div>
    );
  }
}

export default AppWithAuth;

import React from "react";
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import Link from '@material-ui/core/Link';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import { withStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
import { orange } from '@material-ui/core/colors';
import { SignIn } from "aws-amplify-react";
import ButtonAuth0 from "./../buttons/auth0"

const styles = theme => ({
  '@global': {
    body: {
      backgroundColor: theme.palette.common.white,
    },
  },
  paper: {
    marginTop: theme.spacing(8),
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center'
  },
  form: {
    width: '100%', // Fix IE 11 issue.
    marginTop: theme.spacing(1)
  },
  cognito: {
    margin: theme.spacing(3, 0, 2),
    color: theme.palette.getContrastText(orange[600]),
    backgroundColor: orange[600],
    '&:hover': {
      backgroundColor: orange[700]
    }
  }
});

class CustomSignIn extends SignIn {
  constructor(props) {
    super(props);
    this._validAuthStates = ["signIn", "signedOut", "signedUp"];
  }

  showComponent(theme) {
    const {classes} = this.props;
    return (
      <Container component="main" maxWidth="xs">
        <CssBaseline />
        <div className={classes.paper}>
          <ButtonAuth0 />
          <Typography component="h1" variant="h5">
            Sign in
          </Typography>
          <form className={classes.form} noValidate>
            <TextField
              variant="outlined"
              margin="normal"
              required
              fullWidth
              id="username"
              label="Username"
              name="username"
              autoFocus
              onChange={this.handleInputChange}
            />
            <TextField
              variant="outlined"
              margin="normal"
              required
              fullWidth
              name="password"
              label="Password"
              type="password"
              id="password"
              onChange={this.handleInputChange}
            />
            <Button
              type="submit"
              fullWidth
              variant="contained"
              color="inherit"
              className={classes.cognito}
              onClick={(event) => super.signIn(event)}
            >
              Sign In With Cognito
            </Button>
            <Grid container>
              <Grid item xs>
                <Link href="#" variant="body2" onClick={() => super.changeState("forgotPassword")}>
                  Reset password?
                </Link>
              </Grid>
              <Grid item>
                <Link href="#" variant="body2" onClick={() => super.changeState("signUp")}>
                  {"Don't have an account? Sign Up"}
                </Link>
              </Grid>
            </Grid>
          </form>
        </div>
      </Container>
    );
  }
}

export default (withStyles(styles)(CustomSignIn));

import React from 'react';
import { withAuth0 } from 'aws-amplify-react';
import Button from '@material-ui/core/Button';
import { red } from '@material-ui/core/colors';
import { withStyles } from '@material-ui/core';
import { Auth } from 'aws-amplify';

const auth0 = {
  "domain": "<...>",
  "clientID": "<...>",
  "redirectUri": "http://localhost:3000",
  "audience": "",
  "responseType": "token id_token", // for now we only support implicit grant flow
  "scope": "openid profile email", // the scope used by your app
  "returnTo": "http://localhost:3000"
};

Auth.configure({
  auth0
});

const styles = theme => ({
  auth0: {
    margin: theme.spacing(3, 0, 2),
    color: theme.palette.getContrastText(red[700]),
    backgroundColor: red[700],
    '&:hover': {
      backgroundColor: red[800]
    }
  }
});

const Auth0Button = (props) => (
  <div>
    <Button
      fullWidth
      variant="contained"
      color="inherit"
      className={props.classes.auth0}
      onClick={props.auth0SignIn}
    >
      Sign In With auth0
    </Button>
  </div>
)

export default withAuth0(withStyles(styles)(Auth0Button));



从“React”导入React；
从“aws放大反应”导入{withAuth0}；
从“@material ui/core/Button”导入按钮；
从'@material ui/core/colors'导入{red}；
从'@material ui/core'导入{withStyles}；
从'aws amplify'导入{Auth}；
常量auth0={
“域”：“，
“clientID”：“，
“重定向URI”：http://localhost:3000",
“听众”：“，
“responseType”：“token id_token”，//目前我们只支持隐式授权流
“范围”：“openid配置文件电子邮件”//应用程序使用的范围
“返回”：http://localhost:3000"
};
Auth.configure({
auth0
});
常量样式=主题=>({
auth0:{
边距：主题。间距（3,0,2），
颜色：theme.palette.GetContractText（红色[700]），
背景颜色：红色[700]，
“&：悬停”：{
背景颜色：红色[800]
}
}
});
const Auth0Button=（道具）=>(
使用auth0登录
)
使用auth0导出默认值（使用样式（样式）（auth0按钮））；
这应该是独立工作还是仍需遵循上面链接中的步骤1到步骤4？

回答我自己的问题。奇怪的是，我不知怎么没有试过这个

查看源代码，我尝试将auth0配置对象传递给withAuth0初始化，并消除了该错误消息

使用auth0导出默认值（使用样式（样式）（auth0按钮），auth0）