ERROR IN GETTING USER CREDENTIALS - fed in Frontend not getting logged in backend

[RitaHC]

Describe the bug A clear and concise description of what the bug is.

We are creating a Social Media app-> I have made some additional fields in the User model and they are not popping up in the credentials section.

The bug is in the Backend, it is not populating the data in the backend

What is the problem you are trying to solve?

Trying to display the user fields input in the frontend to get stored in the backend

Expected behavior A clear and concise description of what you expected to happen.

It should send back email, password, name, city and description to the backend

What is the actual behavior? A clear and concise description of what actually happened.

It just give email, password and password confirmation, rest data does not pops up

Post any code you think might be relevant (one fenced block per file)

BACKEND CODE

//=================================== SIGN UP ================================
// POST
// ROUTE ->  /sign-up
router.post('/sign-up', (req, res, next) => {

    Promise.resolve(req.body.credentials)
        .then((credentials) => {
            console.log(req.body.credentials)
            if (
                !credentials ||
                !credentials.password ||
                credentials.password !== credentials.password_confirmation

            ) {
                throw new BadParamsError()
            }
        })
        .then(() => bcrypt.hash(req.body.credentials.password, bcryptSaltRounds))
        .then((hash) => {
            console.log(`=========== req.body.credentials.name=========`, req.body.credentials.name)
            return {
                email: req.body.credentials.email,
                hashedPassword: hash,
                city: req.body.credentials.city,
                profilePicture: req.body.credentials.profilePicture ,
                coverPicture: req.body.credentials.coverPicture,
                name: req.body.credentials.name ,
                description: req.body.credentials.description ,
                active: req.body.credentials.active
            }
        })
        .then((user) => User.create(user))
        .then((user) => res.status(201).json({ user: user.toObject() }))
        .catch(next)
})

FRONTEND CODE

// import React, { Component } from 'react'
import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'

import { signUp, signIn } from '../../api/auth'
import messages from '../shared/AutoDismissAlert/messages'

import Form from 'react-bootstrap/Form'
import Button from 'react-bootstrap/Button'

const SignUp = (props) => {
    // SETTING UP USE STATE FOR EACH ITEM  
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')
    const [passwordConfirmation, setPasswordConfirmation] = useState('')
    const [profilePicture, setProfilePicture] = useState('')
    const [coverPicture, setCoverPicture] = useState('')
    const [name, setName] = useState('')
    const [description, setDescription] = useState('')
    const [city, setCity] = useState('')
    const [active, setactive] =  useState('')

    const navigate = useNavigate()

    const onSignUp = (event) => {
        event.preventDefault()

        const { msgAlert, setUser } = props

        const credentials = {email, password, passwordConfirmation, name, description, profilePicture,
            coverPicture, city
        }

        signUp(credentials)
            .then(() => signIn(credentials))
            .then((res) => setUser(res.data.user))
            .then(() =>
                msgAlert({
                    heading: 'Sign Up Success',
                    message: messages.signUpSuccess,
                    variant: 'success',
                })
            )
            // Then Navigate to a path
            .then(() => navigate('/sign-in'))
            .catch((error) => {
                setEmail('')
                setPassword('')
                setPasswordConfirmation('')
                msgAlert({
                    heading: 'Sign Up Failed with error: ' + error.message,
                    message: messages.signUpFailure,
                    variant: 'danger',
                })
            })
    }

    return (
        <div className='row'>
            <div className='col-sm-10 col-md-8 mx-auto mt-5'>
                <h3>Sign Up</h3>
                <Form onSubmit={onSignUp}>

                <Form.Group controlId='name'>
                        <Form.Label>Name</Form.Label>
                        <Form.Control
                            required
                            type='name'
                            name='name'
                            value={name}
                            placeholder='Enter name'
                            onChange={e => setName(e.target.value)}
                        />
                    </Form.Group>

                    <Form.Group controlId='description'>
                        <Form.Label>Description</Form.Label>
                        <Form.Control
                            required
                            type='description'
                            name='description'
                            value={description}
                            placeholder='Description yourself'
                            onChange={e => setDescription(e.target.value)}
                        />
                    </Form.Group>

                    <Form.Group controlId='email'>
                        <Form.Label>Email address</Form.Label>
                        <Form.Control
                            required
                            type='email'
                            name='email'
                            value={email}
                            placeholder='Enter email'
                            onChange={e => setEmail(e.target.value)}
                        />
                    </Form.Group>

                    <Form.Group controlId='password'>
                        <Form.Label>Password</Form.Label>
                        <Form.Control
                            required
                            name='password'
                            value={password}
                            type='password'
                            placeholder='Password'
                            onChange={e => setPassword(e.target.value)}
                        />
                    </Form.Group>
                    <Form.Group controlId='passwordConfirmation'>
                        <Form.Label>Password Confirmation</Form.Label>
                        <Form.Control
                            required
                            name='passwordConfirmation'
                            value={passwordConfirmation}
                            type='password'
                            placeholder='Confirm Password'
                            onChange={e => setPasswordConfirmation(e.target.value)}
                        />
                    </Form.Group>

                    <Form.Group controlId='profilePicture'>
                        <Form.Label>Profile Picture</Form.Label>
                        <Form.Control
                            type='profilePicture'
                            name='profilePicture'
                            value={profilePicture}
                            placeholder='Add your photo'
                            onChange={e => setProfilePicture(e.target.value)}
                        />
                    </Form.Group>

                    <Form.Group controlId='coverPicture'>
                        <Form.Label>Cover Picture</Form.Label>
                        <Form.Control
                            type='coverPicture'
                            name='coverPicture'
                            value={coverPicture}
                            placeholder='Add your photo'
                            onChange={e => setCoverPicture(e.target.value)}
                        />
                    </Form.Group>

                    <Form.Group controlId='city'>
                        <Form.Label>City</Form.Label>
                        <Form.Control
                            type='city'
                            name='city'
                            value={city}
                            placeholder='Enter your city'
                            onChange={e => setCity(e.target.value)}
                        />
                    </Form.Group>

                    <Button variant='primary' type='submit'>
                        Submit
                    </Button>
                </Form>
            </div>
        </div>
    )

}

export default SignUp

What is your best guess as to the source of the problem?

problem with backend

What things have you already tried to solve the problem?

Self study, online, Team members help

Additional context Add any other context about the problem here.

That's pretty much it

Paste a link to your repository here Frontend https://github.com/RitaHC/Social-Media-Clone-Front-End/tree/ritaF2

Backend https://github.com/bruce

abrigo/App3-API/tree/content_Routes2

[timmshinbone]

Instead of handling all this on sign up, I'd recommend reverting back to the initial AUTH components, and building a route similar to change-password that updates the user with these additional fields. Try that instead of changing the built in sign up components.

[RitaHC]

Thanks Timm, trying that

[RitaHC]

Got my contents to display in the Sign up page itself -> There was a problem in my axios call which defined the credentials

corrected Code: ->

export const signUp = (credentials) => {
    return axios({
        method: 'POST',
        url: apiUrl + '/sign-up',
        data: {
            credentials: {
                email: credentials.email,
                password: credentials.password,
                password_confirmation: credentials.passwordConfirmation,
                name: credentials.name
            },
        },
    })
}