Loading
Current section: Redirect Cookie 5 exercises
solution

Adding Redirect Functionality to Login and Signup Forms

Loading solution

Transcript

00:00 Let's start out and log in and right down here in our UI, we've got the provider connection form, and we want to add a redirect to prop to that. So redirect to is the redirect to that we're using for the login. Now, it's not too jazzed about that,

00:18 so we've got to go in here and get our redirect to prop defined. I think it's reasonable to say that this needs to be an optional string, so not required. Then we'll just render a hidden input. Input type hidden name. Yeah, Copilot's got my back.

00:37 There you go. Name redirect to value is the redirect to value. Awesome. So with that now, this should be a little more happy about that, but it's complaining because redirect to could be null. So what we can do is default it up here.

00:53 Redirect to can default to an empty string. That should work. Or you know what? It makes even more sense for the usability of this API to accept also null. That's a pretty common use case. So what we can do is just handle that ourselves.

01:11 So redirect to, otherwise, null. There we go. Now, users don't have to worry about defaulting in and all that. That's a lot better. Okay, great. We also need to do this for our signup. So come down here, pretty much the same thing. Just add a redirect to, and that's our redirect to.

01:31 So now, we can verify that we've got things working the way they should, just by looking at the DOM output on these buttons, and we should have, yep, there it is. Our redirect to settings profile. That is the first section. Well done.