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
- Part 14: Send registration data to the server
- Part 15: Add postgres
- Part 16: Implement model and DB connection
- Part 17: Create a session token
- Part 18: Implement login
- Part 19: Determine if we are logged in
- Part 20: Change state after we login
We now repeat the same process for the registration modal, with one more step: when we register, we need to send back the cookie like we do for the login process.
In pages/api/auth/register.js we first:
import Cookies from 'cookies'then right before the call to send a successful response:
res.end(JSON.stringify({ status: 'success', message: 'User added' }))We add the session cookie:
const cookies = new Cookies(req, res)
cookies.set('nextbnb_session', sessionToken, {
httpOnly: true // true by default
})In the frontend, in components/RegistrationModal.js, we import useStoreActions from easy-peasy:
import { useStoreActions } from 'easy-peasy'Then we define setLoggedIn and setHideModal:
const setLoggedIn = useStoreActions((actions) => actions.login.setLoggedIn)
const setHideModal = useStoreActions((actions) => actions.modals.setHideModal)If the response is an error, we alert and we return immediately after, otherwise we set the user as logged in:
const submit = async () => {
const response = await axios.post('/api/auth/register', {
email,
password,
passwordconfirmation
})
if (response.data.status === 'error') {
alert(response.data.message)
return
}
setLoggedIn(true)
setHideModal(true)
}Try the application: you should be able to create a new user using the registration form, the UI should change to show that you are logged in.
To logout, you can delete the cookie manually using the devtools (you can later implement logout yourself), or open a new incognito browser window.
This content originally appeared on flaviocopes.com and was authored by flaviocopes.com
flaviocopes.com | Sciencx (2021-12-21T05:00:00+00:00) Airbnb clone, log in after registration. Retrieved from https://www.scien.cx/2021/12/21/airbnb-clone-log-in-after-registration/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.