How To Redirect Back to the Previous Page After Login with AdonisJS

In this lesson, we'll learn an easy way we can redirect our user's back to their original page after they login or register in an AdonisJS application.

Published
Dec 18, 22
Duration
3m 4s

Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.

Adocasts

Burlington, KY

πŸ•‘ Chapters:

00:00 - Intro
00:22 - Getting Referrer URL
00:50 - Adding Forward URL to Sign In Form
01:40 - Adding Forward to Validator
02:00 - Altering Post Sign In Redirect
02:35 - Outro

πŸ“œ Transcript:

0:00

if we want a user to be logged in before

0:01

they perform some action on the site

0:02

then we would ideally want to take them

0:04

right back to that action after they're

0:06

done logging in today we're going to

0:07

learn how we can do that so if we take a

0:09

look here we have a sign in pop-up here

0:11

that allows them to enter in their

0:13

username their password to log in once

0:15

they do log in though they're taken back

0:16

to the home page which is less than

0:18

ideal so how do we alter the sign in

0:19

button to take them right back here

0:21

after they've finished signing in first

0:22

you'll want to go ahead and dive into

0:24

your application go to your sign in show

0:26

make sure that you have requests

0:27

imported from your HTTP context then off

0:29

of the request what we'll want to do is

0:31

grab the refer so that would be request

0:33

dot header and then pass in refer Adonna

0:36

still support both spellings for refer

0:37

so you could do referrer as it's

0:39

described within the spec or you could

0:40

do refer as a subscribed within English

0:42

and then you'll just want to provide

0:43

that value into the page somehow so we

0:45

can do that directly by sharing it to

0:47

the page data just like so give that a

0:49

save now let's jump into our sign and

0:50

show page which is right here and let's

0:52

perform some action to check and see

0:53

whether or not we have that value so we

0:55

could do at if refer to check and see

0:57

whether or not refers on the state and

0:59

our if if it is then we can just provide

1:01

it in as a hidden value so we can do

1:03

input type equals hidden name of forward

1:05

so that we can forward them back to

1:06

whatever the value is and value of that

1:09

refer so if we give this a save jump

1:11

back into our application here and visit

1:12

sign in take a look at the HTML for this

1:15

we should see a hidden input with the

1:18

value of whatever page it was that

1:19

referred us to our sign in page as a

1:22

brief aside I am using unpoly here so

1:23

this modal is its own page you'll see

1:25

that we're actually at the sign in page

1:26

instead of this HTTP method spoofing

1:28

page but you can still see that page in

1:30

the background so do note that this is a

1:32

completely separate page that we're on

1:33

so now we have the forward address so we

1:35

want to forward them back to after

1:36

they're finished signing in and it's

1:38

going to be sent up to our action as

1:39

part of our form data so what we want to

1:41

do is add this into our validator so

1:43

let's jump up to our validators we have

1:45

a sign in validator here let's add in

1:46

forward as a schema string and let's

1:49

make this optional jump back into our

1:50

auth controller and instead of the show

1:52

method there let's dive down into our

1:53

actual sign in method and we want to

1:55

grab this property out of our validated

1:57

data so forward there and by default

1:59

this action is just forwarding back to

2:00

the home page so we can alter this by

2:02

checking to see whether or not we

2:03

actually have a forward value if we do

2:05

then we'll forward them to that forward

2:06

value otherwise we'll continue on to the

2:08

home page so here we can do

2:09

response.redirect provide to path and

2:11

then just provide in that forward value

2:12

there if there's certain pages that you

2:14

don't want them to be forwarded onto

2:15

then you would want to perform some

2:17

check there to make sure that you're not

2:18

forwarding them to one of those pages

2:19

but for the most part this should

2:21

suffice for your needs so we go ahead

2:22

and give this a save jump back into our

2:24

application visit our sign in page once

2:25

more go ahead and sign in hit enter on

2:28

that and we're taking right back to this

2:29

page and now I can perform some action

2:31

since I'm now authenticated so there's a

2:33

really quick way how you can forward a

2:34

user back to the page that they were

2:35

just on if you require authentication to

2:37

perform some action on your site if you

2:38

learned something new or you enjoyed

2:39

this lesson please consider hitting the

2:40

like button down below and subscribing

2:42

future lessons just like this one we do

2:43

Focus heavily on Adonis JS here and you

2:45

are seeing a sneak peek at the feature

2:46

evolution of our site which is coming

2:48

soon so if you stick around and learn a

2:49

bit with us here I'd really appreciate

2:50

it thanks for watching everybody and

2:51

I'll see you in the next one

Join The Discussion! (0 Comments)

Please sign in or sign up for free to join in on the dicussion.

robot comment bubble

Be the first to Comment!