# Create a Login Page

**URL:** <https://discourse.sst.dev/t/create-a-login-page/71>\
**Category:** Chapter Comments\
**Created:** [May 9, 2018, 6:39pm UTC](https://discourse.sst.dev/t/create-a-login-page/71 "2018-05-09T18:39:14Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![anomalyinnovations](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/anomalyinnovations/32/10_2.png) [@anomalyinnovations](https://discourse.sst.dev/u/anomalyinnovations)\
**Post date:** [May 9, 2018, 6:39pm UTC](https://discourse.sst.dev/t/create-a-login-page/71/1 "2018-05-09T18:39:15Z")

</div>

_From @jayair on Mon Apr 10 2017 01:03:11 GMT+0000 (UTC)_  
  
Link to chapter - [http://serverless-stack.com/chapters/create-a-login-page.html](http://serverless-stack.com/chapters/create-a-login-page.html)  
  
_Copied from original issue: [https://github.com/AnomalyInnovations/serverless-stack-com/issues/37](https://github.com/AnomalyInnovations/serverless-stack-com/issues/37)_

---

<div class="post-metadata">

**Author:** ![serverless-js](https://avatars.discourse-cdn.com/v4/letter/s/4da419/32.png) [@serverless-js](https://discourse.sst.dev/u/serverless-js)\
**Post date:** [November 18, 2018, 8:36pm UTC](https://discourse.sst.dev/t/create-a-login-page/71/2 "2018-11-18T20:36:40Z")

</div>

Is it safe to store password in state?

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [November 19, 2018, 1:54am UTC](https://discourse.sst.dev/t/create-a-login-page/71/3 "2018-11-19T01:54:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![goswivt](https://avatars.discourse-cdn.com/v4/letter/g/58956e/32.png) [@goswivt](https://discourse.sst.dev/u/goswivt)\
**Post date:** [February 15, 2020, 8:43am UTC](https://discourse.sst.dev/t/create-a-login-page/71/4 "2020-02-15T08:43:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [February 22, 2020, 6:39pm UTC](https://discourse.sst.dev/t/create-a-login-page/71/5 "2020-02-22T18:39:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![vitor-rosa](https://avatars.discourse-cdn.com/v4/letter/v/ecccb3/32.png) [@vitor-rosa](https://discourse.sst.dev/u/vitor-rosa)\
**Post date:** [June 16, 2020, 4:54pm UTC](https://discourse.sst.dev/t/create-a-login-page/71/7 "2020-06-16T16:54:15Z")

</div>

Hello,  
So I had a problem in this chapter…

```auto
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:

```auto
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) {
    event.preventDefault();
  }

  render(); {
    return (
    <div className="Login">
      <form onSubmit={handleSubmit}>
        <FormGroup controlId="email" bsSize="large">
          <FormLabel>Email</FormLabel>
          <FormControl
            autoFocus
            type="email"
            value={email}
            onChange={e => setEmail(e.target.value)}
          />
        </FormGroup>
        <FormGroup controlId="password" bsSize="large">
          <FormLabel>Password</FormLabel>
          <FormControl
            value={password}
            onChange={e => setPassword(e.target.value)}
            type="password"
          />
        </FormGroup>
        <Button block bsSize="large" disabled={!validateForm()} type="submit">
          Login
        </Button>
      </form>
    </div>
  );
 }
}

```

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [July 2, 2020, 8:44pm UTC](https://discourse.sst.dev/t/create-a-login-page/71/8 "2020-07-02T20:44:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sidrubs](https://avatars.discourse-cdn.com/v4/letter/s/b9e5f3/32.png) [@sidrubs](https://discourse.sst.dev/u/sidrubs)\
**Post date:** [July 12, 2020, 5:57pm UTC](https://discourse.sst.dev/t/create-a-login-page/71/9 "2020-07-12T17:57:22Z")

</div>

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:

```auto
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?

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [July 20, 2020, 1:46am UTC](https://discourse.sst.dev/t/create-a-login-page/71/10 "2020-07-20T01:46:11Z")

</div>

That’s strange. Can you remove your node\_modules, run `npm install` and try again?

---

<div class="post-metadata">

**Author:** ![sidrubs](https://avatars.discourse-cdn.com/v4/letter/s/b9e5f3/32.png) [@sidrubs](https://discourse.sst.dev/u/sidrubs)\
**Post date:** [July 27, 2020, 1:16am UTC](https://discourse.sst.dev/t/create-a-login-page/71/11 "2020-07-27T01:16:23Z")

</div>

Thank you, that seemed to work.

---

<div class="post-metadata">

**Author:** ![cmlins](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/cmlins/32/1034_2.png) [@cmlins](https://discourse.sst.dev/u/cmlins)\
**Post date:** [November 22, 2020, 2:27am UTC](https://discourse.sst.dev/t/create-a-login-page/71/12 "2020-11-22T02:27:24Z")

</div>

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

TypeError: Cannot read property ‘REGION’ of undefined

Module.  
src/index.js:13

```auto
   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

```

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [November 22, 2020, 7:40pm UTC](https://discourse.sst.dev/t/create-a-login-page/71/13 "2020-11-22T19:40:48Z")

</div>

In the previous chapter — [https://serverless-stack.com/chapters/configure-aws-amplify.html](https://serverless-stack.com/chapters/configure-aws-amplify.html), you’ll need to replace those with the ones from the resources you created.

---

<div class="post-metadata">

**Author:** ![cmlins](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/cmlins/32/1034_2.png) [@cmlins](https://discourse.sst.dev/u/cmlins)\
**Post date:** [November 22, 2020, 7:57pm UTC](https://discourse.sst.dev/t/create-a-login-page/71/14 "2020-11-22T19:57:18Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![adieCodes](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/adiecodes/32/1044_2.png) [@adieCodes](https://discourse.sst.dev/u/adieCodes)\
**Post date:** [December 6, 2020, 11:49am UTC](https://discourse.sst.dev/t/create-a-login-page/71/15 "2020-12-06T11:49:53Z")

</div>

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](https://react-bootstrap.netlify.app/components/forms/#forms-input-sizes)

---

<div class="post-metadata">

**Author:** ![heyysaiii](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/heyysaiii/32/1176_2.png) [@heyysaiii](https://discourse.sst.dev/u/heyysaiii)\
**Post date:** [May 31, 2021, 6:33pm UTC](https://discourse.sst.dev/t/create-a-login-page/71/16 "2021-05-31T18:33:20Z")

</div>

In the chapter [Create a Login Page | Serverless Stack](https://serverless-stack.com/chapters/create-a-login-page.html),

while running $npm start , getting this error.

```auto
Failed to compile
./src/index.js
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 createDescriptor.next (<anonymous>)
    at Array.map (<anonymous>)
    at Generator.next (<anonymous>)
    at createDescriptors.next (<anonymous>)
    at createPresetDescriptors.next (<anonymous>)
    at Generator.next (<anonymous>)
    at Generator.next (<anonymous>)
This error occurred during the build time and cannot be dismissed.

```

Please check