After a user successfully signed up to our application we want to direct them back over to the landing
page for us.
That's essentially just the route route we need to figure out some way.
No one to actually redirect a user around inside the next application.
Number two we need to make sure that we only do that after a user has successfully signed in.
Let me first show you how we redirect a user or forcibly navigate them around inside of a next app.
Inside my sign up file at the very top.
I'm going to find the important statement that we have for axioms.
We're not making use of that anymore so I'm going to clean up very quickly I'm going to import router
from next flash router so this router object right here is how we're going to programmatically it navigate
a user around right now let's just add in a call directly inside of.
On submit we'll say regardless of whether or not we sign up successfully or not.
Let's just navigate our user back to the root root.
I will do so by calling a router push and then providing the route that I want to navigate the user
to.
And that's pretty much it.
So now we save this and flip back over now whenever I click on sign up.
Even if the request is not successful I should navigate back over to the landing page.
Yep definitely works all right.
Well that's easy enough.
So now we need to figure out how we can navigate a user only if our request is successful.
There's two different ways we can approach this with our use request took.
We can either put on an a wait on request right here because that is an asynchronous function and then
call Bush right after that.
So this is approach number one but it's not going to quite work as we expect right now.
Let me show you why I'm going to save this in a flip back over I'll then click on sign up so really
quickly if I look at my network request log I'll see the request to sign up was not successful but I
still navigated over to that landing page.
So why is that.
Well inside of our user request Hoke we do request function.
Here it is right here.
Is going to attempt to make the request and if the request fails for any reason we enter this catch
statement.
We then set errors and that's going to cause our component design component this case to be updated.
But most importantly we caught the error that occurred right here.
So no error is going to surface back out inside this on submit function which means no matter what.
After calling do request even if there's an error we're still going to proceed on down to retort push
right here.
So that's not super ideal.
There's a couple of different ways that we can deal with this.
We could decide back over inside of do request that after catching this error right here we could re
throw it after updating this Ayres piece of state.
So for example right after calling set errors I could put in throw Error don't read throwing the error
which means it's going to be exposed or essentially throw this line right here which means I will never
proceed onto the router not push so let's save that and try this out back inside of our browser I'll
do a sign up.
And now I see the air right here and I did not get redirected.
We can now put together some additional try catch inside of on summit to make sure that we don't see
the air down here inside of our console.
It doesn't really matter that we see an error down here it's not that big a deal.
But if you really care about it we could wrap this thing with an additional try catch.
That's one way to deal with this but another way that might be just a little bit easier to implement
would be to add in an additional argument or additional parameter to our user request took we could
call it something like on success.
And as you guessed this would be a callback that will be invoked anytime that we make a request successfully.
Well let's try that approach I'm going to take that retro up push line and move it up into this on success
thing.
I'll make sure to clean up that semicolon at the very end
so now we can look back over to use request and say after we make the request successfully let's call
this on success callback so back inside a used request I will D structure off on success and then downside
of do request.
After making the request and getting back in response successfully I will check and see if the on success
callback was provided and if it was then let's go ahead and call it and just for kind of convenience
sake let's provide the response data that we got inside of here as well so I'm going to call that thing
with response dot data not strictly required right now because we're not actually making use of the
data that comes back in response but maybe we will at some point in time.
So I'm just kind of thinking ahead here if we take this approach we no longer need to re throw that
air down here at the bottom inside that catch statement okay.
That looks pretty good.
I'm going to say both these files I'm going to flip back over I'll refresh the page.
Click on sign up.
OK that looks good and if I put in some valid information and sign up again I get redirected over to
landing page when the request was made successfully.
Well I think that looks pretty good.
Well that's pretty much it for real on our sign up component now that we have signed up.
We need to make sure on our landing page let's go and look at our mockup.
We need to show the text on the landing page something like you are signed in that's not going to be
as easy as just always showing you are signed in.
Because remember there's really two forms to this landing page.
We need to somehow detect whether or not these are signed in and if they are not we're gonna put in
you are not signed in.
Otherwise if they are signed in will show you are signed in get so quick Basra here and we'll start
working on this landing page in just a moment.