# Turbo Native 4. Better Authentication flow. Turbo Confirm. Turbo Replace #193

- URL: https://superails.com/posts/turbo-native-4-better-authentication-flow-turbo-confirm-turbo-replace
- Published: 2024-09-08
- Duration: 11:52
- Access: free
- Topics: iOS, outdated
- Playlists: Hotwire Native

- confirmation modal to sign_out: https://github.com/corsego/tinder/commit/03757800b050af752d672dc1d5cde9b18cfe4a6b
- don't render devise views as modals: https://github.com/corsego/tinder/commit/cbb5bbf3de81f82a0598ca2e4ab6882d9151229c
- navbar - do not stack navigation (breadcrumbs): https://github.com/corsego/tinder/commit/9e4b9a24241e11e3b98c02df6775e096351eec97
- generate devise views: https://github.com/corsego/tinder/commit/c8f9df797b9fddd2d71cff491fe44ef6c20a0ccd
- devise forms - do not stack navigation: https://github.com/corsego/tinder/commit/ca4770a89b96226da69e56f26c9281b21418f374
- devise remember_me forever: https://github.com/corsego/tinder/commit/5cee2c20854205356446c524fd7eceb561f66342

## Transcript

Hello friends, let's continue building mobile applications, bound rails and Termin native. So previously we added the authentication of the device, and we can now log in, uh, on desktop and on mobile. And if you try to log in on mobile, let me click on log in. You see it opens up in a native model. Let me log in. So email, password, login. And here I get this, uh, double direct. Uh, so it's not for snappy, but I'm, yes, I'm logged in now. And now let's, uh, continue making the authe authentication flow work smoothly on the mobile. So first of all, I'm going to start by adding a confirmation model. When you want to log out, you know, we have this like, uh, kind of confirmation model with JS on the desktop. Let's try adding them. Uh, so I will go to my application layout where I have the sign out bottom, and I will add this data, confirm. Are you sure? Now let's refresh the page. I click on log out and you see we have this, uh, confirmation model to log out. I can cancel, I can actually click okay and it'll log me out. Okay, let me just log in back and delete work on mobile. So I've added it. I don't need to restart the whole application because I didn't do any changes in the iOS app. I did only change in the Rails app, but I will need to refresh the page. So let me refresh it. Okay, I will click on log out. And you see I have this native, uh, confirmation model. I can cancel, I can click okay, and it'll log me out. Looks good. Now, uh, let's actually save this change. So, um, uh, sign out confirmation model. Okay, now, uh, let's see. So at the moment when we click on log in, on register, opens up as a model, and we'll also have a model if we try to edit our account. Like if we go to this page, we will have, uh, this, uh, page open up as a model on mobile because our rules, let's open our path configuration controller. They say that all the slash new slash edit slash sign in and slash sign up pages should open up as a model. But, uh, realistically, uh, I would not open the device pages as models. I would, uh, open them as full page, uh, redirects. We did it previously just for the sake of example. So I'm going to remove this and let's, uh, once again, try to log in. Now I have a refresh. I click on login. So, uh, I think it has, uh, this page, uh, kind of cached, that's why is still opening up as a model. Let me try To, to restart our iOS application, click on this bottom replace, let's restart in our iOS application. Okay, um, maybe we can see here that it made a request to path configuration. You see the io s application made this request to path configuration. So to get, uh, this JSO and let's look and log in. So see it, uh, does open up as a fully new page. But, uh, let's now log in and have a look how the edit password looks. So login in and I go to edit my profile. And you see it opens up as a model and we still see all this navigation links. So this doesn't look, uh, very nice. Let's not open this one specific, uh, page as a model. So, uh, we don't want to have device pages open up as a model. Let's, uh, add an additional rule that slash user slash edit. The slash user slash edit does not open up as a model, but opens up as a a full page. So I'm actually going to go with this, uh, rule, and here I will have a pattern. It'll be, I will set it like this slash users slash edit. And the context will be not model, it'll be default. Okay? So it will say that like usually the slash new and slash edit, like create a new post edit. The post are going to open up in the model, uh, slash user slash edit will open up, not in a model, but uh, as a default page to direct. Let's, um, again, replace our application. We can observe here how we are going to make another request to this path configuration. Here. We made this request and let me log in once again. Now I'm going to edit my profile. And you see it is a full page direct. Okay, let's save our changes. So what we did is, uh, uh, device pages are not models. Okay, let's go, uh, back to our mobile application. And you see we have this kind of weird navigation. So we go anywhere and it's like, uh, navigation. We get this kind of breadcrumbs. So Go back, go back and, uh, what if in our kind of n links, we don't want to have, uh, the stack navigation. So to do this, we can, uh, go to our application external ERB, and on those links we can add the data. Uh, turbo, what was it? It was, uh, uh, turbo action replace. I will add this to the other links. Let's add it to all these links. Now I will refresh the page and now I will click on dashboard. If you don't have the stack navigation, I will click here. We don't have the stack navigation. I, uh, will, I can log out and it'll not have the stat navigation on login and register pages. So, uh, this kind of our NPA for now, maybe we'll later on we'll are going to make a native, uh, photo navigation. But for now it looks a bit, uh, better. Okay, let's save our changes. Uh, NPA do not stack, uh, navigation. Okay, looks, uh, quite good. Now let's uh, try signing out and, uh, I will click on login one scan. I just want to, yeah, I want to see the flow. So, so pay attention. Now I'm clicking on log in and uh, we had this kind of, uh, navigation. So we navigate to, to the next page. And you see if I click back, I'm kind of looking at the not logged in page. So it's not cool. I don't want to be able to access this page like this. Now of course, if I read, refresh it, it's going to look good, but I don't want to have the static navigation to a not logged in page. So I'm going to add the, this kind of data to action replace to the device forms for this. First of all, I'm going to, uh, generate the device views. So I will say rails generate device views. Okay, let's, uh, come these changes, they'll generate device views. Okay, now, uh, let's start the server once again and go to our, uh, sign in page, uh, for device. So, uh, sessions, new device, sessions new, and here we can try adding data. Turbo action. Replace. Let's try doing this. So, uh, going back to our application, I will log out, I will go to login page, click on login. And you see I, uh, don't have this, uh, navigate back button. So there is no other page that I can navigate to where I was not, uh, logged in. So this makes the kind of behavior snappier. I will do the same data tober action, replace for the other form for registrations or registrations new here like this. Now let's try creating in your account. Log out, register, sign up, and you see it looks, uh, a bit snappier. Okay, let's, uh, save our changes. So, uh, uh, do not stack navigation on device. Uh, sign up and sign in. Okay, looks, uh, quite good. Now, uh, let's see, what would we like to do, uh, next? Yes, there is actually a thing. So, uh, there's was this nice post, uh, on Twitter by Joe Otti, where he also suggests, uh, adding a device, remember me settings, uh, for, uh, our application for a longer period of time for mobile. 'cause like, you don't want to just log out the users on a mobile, uh, uh, randomly or all the time you want to give them sent in, of course, unless you're building a banking application. So, um, device remember me for two years and in user IB dev remember me as in this true, okay? I will, uh, actually copy the link to the street, uh, in the description of the come and I will say, uh, device remember me forever. If you are not using device, if you're using like your own authentication, you should store the user, not in the session, but in the cookie. It has to be a permanent cookie and you like have to remember it for 20 years or something. This is better than, uh, logging the user out and frustrating him all the time. Okay, looks, uh, quite good. So now we have a snap air log in logout experience and, uh, navigating around this links does not feel really weird anymore. That's it for this episode. See you in the next one. I.