Create a Login Page

Chapter Comments
1

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

Copied from original issue: https://github.com/AnomalyInnovations/serverless-stack-com/issues/37

2

Is it safe to store password in state?

3

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

4

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.

5

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

7

Hello,
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) {
    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>
  );
 }
}
8

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

9

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?

10

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

11

Thank you, that seemed to work.

1 Like
12

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

   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
13

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

14

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
15

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

2 Likes
16

In the chapter Create a Login Page | Serverless Stack,

while running $npm start , getting this error.

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