Create a Login Page

From @jayair on Mon Apr 10 2017 01:03:11 GMT+0000 (UTC)

Link to chapter -

Copied from original issue:

Is it safe to store password in state?

It is only there temporarily and I think it should be okay?

It would have been really nice if there was dependencies and imports are listed accordingly. It took 3 hours to figure out which exports goes where.

Hmm can you expand on that a little? Which imports did you have a hard time figuring out?

So I had a problem in this chapter…

import { Button, FormGroup, FormControl, ControlLabel } from "react-bootstrap";

ControlLabel is not supported anymore. I had to change it to FormLabel to make it work.
Remembering to change in the code too… I also added the render function:

import React, { useState } from "react";
import { Button, FormGroup, FormControl, FormLabel } from "react-bootstrap";
import "./Login.css";
import { render } from "@testing-library/react";

export default function Login() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  function validateForm() {
    return email.length > 0 && password.length > 0;

  function handleSubmit(event) {

  render(); {
    return (
    <div className="Login">
      <form onSubmit={handleSubmit}>
        <FormGroup controlId="email" bsSize="large">
            onChange={e => setEmail(}
        <FormGroup controlId="password" bsSize="large">
            onChange={e => setPassword(}
        <Button block bsSize="large" disabled={!validateForm()} type="submit">

Can you post which version of react-bootstrap you are using in your package.json?

I am new to React so am probably making a silly error. I have completed the previous chapters without issue. However at the end of the Create a Login Page chapter, when I run npm start, I get the following error in the browser:

Failed to compile.

Error in ./~/@aws-sdk/credential-provider-cognito-identity/dist/cjs/fromCognitoIdentity.js
Module parse failed: /home/sidney/Documents/code/tuts/notes-app/notes-app-client/node_modules/@aws-sdk/credential-provider-cognito-identity/dist/cjs/fromCognitoIdentity.js Unexpected token (13:20)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (13:20)
 @ ./~/@aws-sdk/credential-provider-cognito-identity/dist/cjs/index.js 4:21-53

I checked that all of the values in config.js are correct, but the error persists. Is there something I am overlooking?

That’s strange. Can you remove your node_modules, run npm install and try again?

Thank you, that seemed to work.

1 Like

I’ve got this error.I think my config.js file is correct, so, what’s wrong?

TypeError: Cannot read property ‘REGION’ of undefined


   10 | Amplify.configure({  
   11 |   Auth: {  
   12 |     mandatorySignIn: true,
>  13 |     region: config.cognito.REGION,  
   14 |     userPoolId: config.cognito.USER_POOL_ID,  
   15 |     identityPoolId: config.cognito.IDENTITY_POOL_ID,  
   16 |     userPoolWebClientId: config.cognito.APP_CLIENT_ID

In the previous chapter —, you’ll need to replace those with the ones from the resources you created.

I found out what was wrong. The values ​​were correct, but the “export default config” command was missing. Thank you for your help

1 Like

For anyone who’s decided to throw TypeScript into the mix you’ll find that there’s an issue with size being an attribute on the <Form.Group>, this should be moved to the <Form.Control> as per react-bootstrap docs


In the chapter Create a Login Page | Serverless Stack,

while running $npm start , getting this error.

Failed to compile
Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions. In C:\Users\saisw\notes-app-client\node_modules\babel-preset-react-app\index.js
    at (<anonymous>)
    at (<anonymous>)
    at (<anonymous>)
    at (<anonymous>)
    at (<anonymous>)
    at (<anonymous>)
    at (<anonymous>)
This error occurred during the build time and cannot be dismissed.

Please check