This content originally appeared on flaviocopes.com and was authored by flaviocopes.com
This post is part of a new series where we build a clone of Airbnb with Next.js. See the first post here.
- Part 1: Let’s start by installing Next.js
- Part 2: Build the list of houses
- Part 3: Build the house detail view
- Part 4: CSS and navigation bar
- Part 5: Start with the date picker
- Part 6: Add the sidebar
- Part 7: Add react-day-picker
- Part 8: Add the calendar to the page
- Part 9: Configure the DayPickerInput component
- Part 10: Sync the start and end dates
- Part 11: Show the price for the chosen dates
- Part 12: Login and signup forms
- Part 13: Activate the modal
In this lesson we’re going to add and set up authentication into the application, so we can manage user logins and registrations.
But first, let me do a little bit of analysis here.
What’s the authentication story of our application? Let’s talk about it.
We’re going to use a database to store our users data (no Firebase, Auth0 or other cloud-based solutions).
We are NOT going to use OAuth (which serves a different purpose) or JWT tokens (which are better suited for API access tokens).
We’ll use what I believe is the most sensible solution to a simple authentication strategy: server based sessions, stored in HTTP-only cookies.
First, we’re going to add an API route to the Next.js application.
By convention Next.js considers a server route any JavaScript file under pages/api/.
Create the file pages/api/auth/register.js. In there, we initialize and export a function:
pages/api/auth/register.js
export default (req, res) => {}I only want to respond to POST requests, so we filter out requests that do not have this HTTP method:
pages/api/auth/register.js
export default (req, res) => {
if (req.method !== 'POST') {
res.status(405).end() //Method Not Allowed
return
}
console.log('POST request received')
}We’ll now use the Axios npm library to POST to this route to create a new user.
Open components/RegistrationModal.js.
We create 3 state properties in the component, add we’ll bind them to the form elements.
Let’s import useState from react:
import { useState } from 'react'then we create 3 state properties, one for each element in the form:
components/RegistrationModal.js
export default (props) => {
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const [passwordconfirmation, setPasswordconfirmation] = useState('')
return <>...</>
}Now to each form item, we add an onChange event listener, which uses the corresponding hook updater function to set the state value when the user types into the form fields:
components/RegistrationModal.js
import { useState } from 'react'
export default function RegistrationModal(props) {
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const [passwordconfirmation, setPasswordconfirmation] = useState('')
return (
<>
<h2>Sign up</h2>
<div>
<form
onSubmit={(event) => {
alert('Sign up!')
event.preventDefault()
}}
>
<input
id="email"
type="email"
placeholder="Email address"
onChange={(event) => setEmail(event.target.value)}
/>
<input
id="password"
type="password"
placeholder="Password"
onChange={(event) => setPassword(event.target.value)}
/>
<input
id="passwordconfirmation"
type="password"
placeholder="Enter password again"
onChange={(event) => setPasswordconfirmation(event.target.value)}
/>
<button>Sign up</button>
</form>
<p>
Already have an account?{' '}
<a href="#" onClick={() => props.showLogin()}>
Log in
</a>
</p>
</div>
</>
)
}Great! When the form is submitted, now, we can console.log the values of the state to make sure they are updated, as we expect:
components/RegistrationModal.js
<form
onSubmit={event => {
console.log(email, password, passwordconfirmation)
event.preventDefault()
}}>If you try to sign up using the website, you should see the values you entered printed in the browser console.
Now go to the terminal and install a the Axios npm package:
npm install axiosThen run npm run dev again to start the Next.js app.
Now switch back to the editor and include Axios in the RegistrationModal component:
components/RegistrationModal.js
import axios from 'axios'and in the form onSubmit event handler function, let’s send those form values to the server, to the auth/register endpoint:
const submit = async () => {
const response = await axios.post('/api/auth/register', {
email,
password,
passwordconfirmation
})
console.log(response)
}and use this function on the submit event:
<form onSubmit={submit}>See? We use the /api/auth/register route, which directly points to the pages/api/auth/register.js file.
Unfamiliar with Axios? See my Axios tutorial
Great! Now if you try to fill the registration form and submit the data:
you’ll see the server prints “POST request received” in the terminal where npm run dev started.
Now in the API endpoint let’s add console.log(req.body) and let’s also send a 200 response back to the client:
pages/api/auth/register.js
export default (req, res) => {
if (req.method !== 'POST') {
res.status(405).end() //Method Not Allowed
return
}
console.log(req.body)
res.end()
}In the terminal, you’ll see the data coming in correctly to the server:
And in the client a successful response.
This content originally appeared on flaviocopes.com and was authored by flaviocopes.com
flaviocopes.com | Sciencx (2021-12-14T05:00:00+00:00) Airbnb clone, send registration data to the server. Retrieved from https://www.scien.cx/2021/12/14/airbnb-clone-send-registration-data-to-the-server/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.