Password reset for mobile apps

[Svarto]

TLDR: Please expose a refreshToken as a dynamic variable in the email templates so mobile apps can build their own deep links and login the user (using refreshSession) to handle password resets.

Unlike Nhost v1, current password reset setup in nhost V2 is not set up to work on mobile only apps according to the UX that mobile users are used to.

So, in a normal password reset scenario on mobile you want something like this:

1. navigate to a screen on mobile and enter your email
2. get a password reset email with a link, click the link to get thrown back into the mobile app
3. inside the mobile app, enter your new password and then you are done (and logged in)

The issue with the current setup is between step 2 and 3, to navigate the user back into the mobile app when they click on the magic link. Preferably, when clicking on a link it takes you straight back to the app and the app handles password reset.

With the current setup, the magic link needs to actually hit the nhost backend so that the password is reset and I assume something is returned to the front end SDK to know the user is logged in.

On mobile that would mean the user clicks the link, gets redirected to the Webbrowser and then suddenly goes back into the app - for one it is super weird experience but also not trivial to setup as the redirectTo URL would need to include some refresh token to login the mobile user in the mobile application and detect that password needs to be changed (i.e. tell the nhost-js SDK that the user is logged in and app needs to detect this is a password change event)

[Svarto]

Additional information on mobile development:

Opening an app directly from a link, requires setting up what is called universal deep links in mobile. It essentially tells the mobile OS that this URL should not be opened by a Webbrowser, but by this downloaded app instead.

However this needs to be setup beforehand with validating ownership by hosting certain files on the backend by both Apple ans Android. Even if we go down that route, and setup so that the https://.nhost.io is opened by the app, we are back at the issue that then this URL doesn't hit the nhost backend but actually the mobile app - so the app needs to somehow manage this URL by logging the user in (which right now would probably mean parsing out the refreshToken, calling nhost.auth.refreshSession(refresh token) and then set new password.

But then a more robust solution would actually be to just pass the refresh token directly into the email template and let us setup the right URL to avoid having to do the universal deep link setup for the nhost domain

[pkreipke]

@Svarto Has there been any news or progress that you know of on this ticket from Nhost? Or have you succeeded in making progress yourself?

[pkreipke]

Was wondering if this work was part of a solution you'd been working on: #679

[pkreipke]

For example, even in a React Native mobile app I could see using the work in #679 to follow the web version of the flow instead of trying to deal with deep links and just asking the user to flip back to the app. E.g.

• in the app user hits a 'Change Password' button which calls auth.resetPassword() to send them an email containing a link.
• Ask the user to check their email. Display a continue button for when they return.
• user goes to their mail and clicks the link which contains the passwordReset token, a redirectTo value and the Nhost endpoint like this:

https://mbsvks.nhost.run/v1/auth/verify?&ticket=passwordReset:64afdfef

• Nhost check the ticket and issues the redirect.
• If expired, the redirect target page receives error info.
• If valid, redirect page displays new password entry form, retrieves the ticket ID from query args and then calls your new version of changePassword() to modify the password.
• after which page displays success and directs them to go back to the app manually (works from Chrome and Safari).

If devs add Linking support to the app, then improvements could be (if in Safari):

• pop the app to the front by navigating to 'my slug://hello' < I tested and found this works whether or not add actual support for Linking. It just pops the app to the foreground.
• deep link back to the sign-out page (e.g. they changed their pwd, we want it entered again).

Wondering about your thoughts - or a nudge towards how to do all in-app.

Thanks!

[pkreipke]

Hmm. Having stepped through doing a resetPassword() and watching the user's ticket get recorded in the users table row and then following the link in the email I can see that I don't actually get the ticket on the last redirect, I get a refresh token - which suggest (as the docs said!) that the user got logged in. Except in my case it's just a landing page, not the app so there's no nhost.auth use at all (yet) and I don't have the ticket, just a token. So embedding changePassword() isn't going to work.

[pkreipke]

I see now that there's also a PR nhost/hasura-auth#186 from earlier which must be part of this. Looking....

It's a bit too bad that ReactNative doesn't have more up to date samples at this point. Will try to contribute.

[pkreipke]

Hmm. Reading through the PR for 186 it looks like it's all there to use the ticket though I'm not seeing it on the link's URL args - is it coming from server on headers? If so, the app doesn't do header :-) how does it get onto deep link?

And I also see yumee deep links mentioned but no example in the docs on how to correctly configure the NHost project with the slug etc.

[Svarto]

Hmm. Reading through the PR for 186 it looks like it's all there to use the ticket though I'm not seeing it on the link's URL args - is it coming from server on headers? If so, the app doesn't do header :-) how does it get onto deep link?

And I also see yumee deep links mentioned but no example in the docs on how to correctly configure the NHost project with the slug etc.

Hi @pkreipke, this is an old issue I left up but I got it working with the password reset flow for myself with the two PRs you linked.

The flow goes:

1. User enters the email in app as they forgot their password
2. they receive an email with a custom deep link, and this link I've written myself as the passwordTicket is exposed in the email templates as a variable (I also include email as a variable sent in the deep link here for step 5)
3. user clicks the link and gets navigated back to app on a screen to enter new password
4. when done, they submit new password and the password is changed with the passwordReset ticket
5. I then directly log the user in by calling nhost.auth.SignIn() with the new details

This issue is not necessary any more for handling password reset flow in app. Hope the above helps, can share some code snippets too if that would help

[pkreipke]

Very interesting, thanks! I think I might have more questions but here are a few initial ones about the specific points above:

Point 1) I think you're using resetPassword() to do this.

DONE For sure! Got first couple of steps worked out. - Per

2. clever! I hadn't seen that the resetPassword() generated email had a template we could modify. Will look at that too! I might need help figuring out how to intercept the link value as you did.

DONE Found where to change in nhost/emails/en/password-reset/body.html and example in react-apollo example - Per

3. does this work from any email app in iOS? I feel like any Chrome based app like GMail doesn't work with deeplink schema navigation - it has to go through Safari which connects with iOS to handle custom schema. Or perhaps it does if one sets up universal linking?

4. this uses your PR above that accepts a ticket value on the changePassword() call. Excellent!

5. nice simplification, I wouldn't have thought of skipping that step.

[pkreipke]

One more: what values do you have in the "Allowed Redirect URLs" field in the Nhost dashboard? Do you include your website and the deep link yumee schema? in what format: e.g. just yumee:// or ???

I imagine it's something like "https://www.yumee.com,yumee://"

[MaxSchilling]

Any update / movement on this topic?

[Svarto]

One more: what values do you have in the "Allowed Redirect URLs" field in the Nhost dashboard? Do you include your website and the deep link yumee schema? in what format: e.g. just yumee:// or ???

I imagine it's something like "https://www.yumee.com,yumee://"

Yes, exactly, I put in yumee:// or whatever deep link URL you have that opens your app

[Svarto]

Any update / movement on this topic?

With the two PRs, is there anything missing here for mobile password reset? I realized I haven't closed this one, so will do it now if you don't have anything that you feel is missing

[pkreipke]

@Svarto Just this question?

3. "does this work from any email app in iOS? I feel like any Chrome based app like GMail doesn't work with deeplink schema navigation - it has to go through Safari which connects with iOS to handle custom schema. Or perhaps it does if one sets up universal linking?"

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.