Password reset on a single page app

Hi all,

I previously had my password reset working for my single page app using SendGrid, but since changing from custom states to URL parameters for navigation, the reset email link isn’t pointing to the correct page.

Here’s the link (which worked) on my old app which used custom states;

Since changing to URL parameters, the reset password page is now found at mydomain.com/?selected=reset_pw so I figured the following should work;

Website home URL?selected=reset_pw=yes&reset=Result of step 1 (Send password res...)

However, the above is directing to a dead page? The resulting link which is generated for a user to click on is (I replaced domain but the rest is identical):

https://mydomain.com/?selected=reset_pw=yes&reset=1649795109459x916739841510752600

Website home URL?selected=reset_pw=yes&reset=Result of step 1 (Send password res...)

The URL parameters don’t make sense - there are too many values and/or not enough keys… looks like you’re missing a parameter key.

That said, as far as I’ve always understood, passwords can only be reset on the built-in reset password page (although I could be wrong about that, especially as you say it was working before using the index page?..)

I remembered why I used SenbdGrid, it’s because the Bubble’s inbuilt password reminder never works for me, I don’t know why?

Any ideas why this workflow won’t send an email to me? I have checked but not there either. The following workflow is on a group called ‘forgot_pw’

No idea…

Is the workflow actually running (and you’re just not receiving the email)?

Or is the workflow itself not running?

The workflow runs and directs the user to the next page but no email is sent. I have tried different emails. Maybe I should contact Bubble support because this should work out-the-box?

Yeah contact support…

I’ve just emailed them, will update this page if/when a solution is found.

I received feedback from Bubble support who said that I can’t use Bubble’s default messaging system because I am also using Sendgrid keys.

I have since managed to get the emails to send using Sendgrid. However, the link which is sent to the user does not redirect to the correct group, the exact group they need to get to is https://mydomain.com/?selected=reset_pw but (once the link adds the password reset code) the final URL looks like this https://mydomain.com/?selected=reset_pw=yes&reset=1650195367163x828710182414319100 and this is a page which looks like my website but the page is empty?

I have ask Bubble for additional help on this.

Again, the URL parameters you’re using are not valid (you’ve got a key missing, or an extra value).

So whatever on-page actions you’re using to read data from the URL and show the appropriate groups aren’t going to work with that.

In other words that URL just points to your index page (which, without any valid URL parameters to show the correct groups, will just appear blank in your case - as is self-evident from what you’re experiencing)…

Also, as I said before, to the best of my knowledge only the built-in ‘reset_pw’ page can be used to reset passwords (certainly the ‘Reset Password’ action is not available on any other page - unless I’m missing something).

Hey @adamhholmes I have tried different URL parameters, I not sure what a key or value means or how it should be formatted so I am basically guessing! I took on board your previous comments but without knowing more I tried to recreate the URL as it was previous, which did work and passwords were reset successfully. I am guessing that this bit is wrong yes&reset=but this was required to make it work before.

The previous freelancer set it up using Sendgrid and I tested it thoroughly, it definitely worked but I will ask Bubble to confirm this.

If the built-in ‘reset_pw’ page can only be used to reset passwords then that would mean Bubblers could not use Sendgrid (or any email management tool) because apparently as soon as you input the Sendgrig keys into Bubble you remove the ability to use the built-in ‘reset_pw’ page.

I’d suggest learning at least the basics of what URL query parameters are before relying on them for your app to work properly…

But, put simply, query parameters are just key/value pairs - they have a ‘key’ (basically the parameter name), and a value. e.g. ?name=darren (where the Key is ‘name’ and the Value is ‘darren’).

A key can only have a single value - but in your URL you have a single key with two values, which can’t work. (i.e. ?selected=reset_pw=yes)

The previous freelancer set it up using Sendgrid and I tested it thoroughly, it definitely worked but I will ask Bubble to confirm this.

I’m intrigued as to how you’ve managed to reset a password from a page other than the reset_pw page?..

As I said before, (at least for me) the reset-password action is only available on the built-in reset_pw page, so how are you resetting the password? (are you saying the reset password action is available on your index page? or are you using another action instead? Or are you using custom code to reset the password?)

Also, what does using Sendgrid, or not, have to do with resetting the password (I’m not talking about sending the reset password email link, but actually resetting the user’s password). Whatever service you use to send the email and token is not relevant (it’s just a link).

If the built-in ‘reset_pw’ page can only be used to reset passwords then that would mean Bubblers could not use Sendgrid (or any email management tool) because apparently as soon as you input the Sendgrig keys into Bubble you remove the ability to use the built-in ‘reset_pw’ page.

None of that makes any sense at all (and is obviously incorrect - just test it for yourself…)… How does adding sendgrid API keys remove a page from your app? (it doesn’t). It certainly works for me (and I’m sure the majority of Bubble apps). I think you’re misunderstanding something here…

Thank you for clarifying, I was at cross wires. I do know how the key/value pairs work, in my case the key is ‘selected’ and the value is ‘reset_pw’. The correct group URL is https://mydomain.com/?selected=reset_pw (as shown in the address bar below).

I am copying the previous set up (like-for-like) and the only difference is the return URL. I don’t know how it worked but I know that the return URL needs to have a way to confirm it’s the correct user. The very first image I posted on this thread is a screen shot of the original link URL which worked, it had two values which is why I was trying to add two.

Bubble’s support is trying to assist but haven’t (so far) said that the reset-password action is only available on the built-in reset_pw page. That said, I would happily use their build in page, I just don’t know how to! I am not trying to reinvent the wheel, I would love the most basic solution.

All I am trying to do is make the link which is emailed to the user direct back to https://mydomain.com/?selected=reset_pw, but annoyingly I can’t simply link to that URL is because how will Bubble know the user has come from the correct email? I think the link must include a secret code for authentication.

This is a good point, you are correct it has nothing to do with it. When I received the initial help reply from Bubble I thought they were saying that I can’t use Bubble’s default reset password due to me using Sendgrid keys, but after re-reading I think they meant that I need to contact Sendgrid for help. Here is the actual response:

After looking into your Bubble app’s settings, I do see that you’ve set up your own Sendgrid keys. Because you are utilizing your own Sendgrid account, this issue of email deliverability actually falls in the territory of Sendgrid.

This is very strange because when I originally emailed them I didn’t mention Sendgrid at all, I only wanted to use Bubble’s default reset password page. I have just emailed again asking why I am unable to use their default reset page and to explain why Sendgrid was mentioned.

1 Like

Yes, they’re talking about deliverability of Sendgrid (which is another issue entirely) - your question seems to be about the URL in the reset password email?..

I suspect (based on your responses to this post) that you’re mixing up and confusing two separate things here…

  1. Sending the reset password email
  2. Actually resetting a user’s password

Those are two separate things (although part of the same process)

The rest password email must contain the reset password token and must link to the built-in reset_pw page of your app.

Then you use the Reset Password action to reset the User’s password - this action is only available on the built in reset_pw page of your app.

The very first image I posted on this thread is a screen shot of the original link URL which worked, it had two values which is why I was trying to add two.

No, it had 2 ‘Keys’ (not 2 values) - it had one value for each key, as it should - not 2 values for one key as in your later post.

When you say ‘it worked’, what do you mean by that? Your User’s were able to reset their password on the Index page of your app? If so how? (what action did you use, seeing as the reset-password action is not available on the index page)?

I have just emailed again asking why I am unable to use their default reset page and to explain why Sendgrid was mentioned.

What do you mean you can’t use the built-in reset_pw page? Why can’t you use it?

All I am trying to do is make the link which is emailed to the user direct back to https://mydomain.com/?selected=reset_pw, but annoyingly I can’t simply link to that URL is because how will Bubble know the user has come from the correct email? I think the link must include a secret code for authentication.

Unless I’m missing some secret hidden method of being able to reset passwords from the index page of your app, that’s not mentioned anywhere in the manual, has never been discussed on the forum, and is completely hidden within the editor (and I’m not ruling out the possibility), you can’t do that…

The link must contain the valid reset-password token, but also the page must have the built-in functionality to be able to recognise and validate it - hence why only the built-in reset_pw page can be used for this.

Bubble’s support is trying to assist but haven’t (so far) said that the reset-password action is only available on the built-in reset_pw page.

You don’t need Bubble, or anyone else, to verify that for you!.. just look for yourself!! The action is not there.

Hey @adamhholmes thanks for your help.

Finally it clicked and the solution came in two parts;

  1. The reason it didn’t previously work was because I didn’t realise that the password reset page must be a unique page, not a group within the index page. I have been doing single page apps since learning Bubble so it’s automatic for me to put things on a group within the index. I had deleted the default “reset_pw” page long ago. Once I created a new ‘reset_pw’ page the email link directed to that page successfully.

  2. The workflow for sending the reset password email needed to be https://mydomain.com/reset_pw?=yes&reset

So, sorry for my misunderstanding because I think if I re-read this whole thread you probably were hinting at the solution all alone, it just didn’t click for me as I didn’t see the big picture.

I honestly don’t know how it worked before, I was sure I only had the index page but maybe I actually did have a unique password reset page.

Both yours and Bubble’s input has helped a lot and I think you’re right, I was partly confused between sending the reset password email and actually resetting a user’s password. As always though, thanks so much mate for your valued time helping me.

How did you do that? (it’s not possible to delete the reset_pw page, nor to create a new one?..)

When the user clicks the link in their email, it goes to https://mydomain.com/reset_pw?1650295757027x404716276406885440.

That’s not a valid reset link (there’s no ‘reset’ parameter)

The problem now is that when the user enters a new password they get this error “This is not a valid password reset request. Please have another reset email sent to you”

You need to include the token as a parameter for ‘reset’ (i.e. htts://mysite.com/reset_pw?reset=[token]

See the docs for more info

Account - Bubble Docs

In fact the solution was identical to the first image I posted, ie. the workflow for sending the reset password email needed to set the link as: https://mydomain.com/reset_pw?=yes&reset

That’s not correct either (in fact that URL is completely meaningless - there is no parameter key for the first parameter, and no value for the second)

I think I edited my last post after you replied to it!

Result of Step 1 is setting the token.

I have no idea! I know I just created a new page called “reset_pw” and there was none before! Sorry, I must be so infuriating for you, I even confuse myself!

Result of Step 1 is setting the token.

Yes, but those URL parameters don’t make any sense…

what is ?=yes supposed to mean? (yes what? there’s no key?!!)

And you’re missing an equals sign after the ‘reset’ parameter key…

1 Like

Oh, there is a key, sorry I had posted a screen shot but if you scroll up can you see a blank space (my post is not there?). Anyway, the key is generated in Step 1 of the workflow… I believe Step 1 creates a token and that is sent with the email.

An agent at Bubble was bouncing ideas with me and after we tried two or three variations he suggested I try https://mydomain.com/reset_pw?=reset(Refer to step 1 …) but that failed too. I then thought I should try adding “yes” almost in desperation, it was in my original first image so worth a try!

I added ?=yes and it worked. I have no clue what it does or how it works though. So to confirm, this is the current link address https://mydomain.com/reset_pw?=yes&reset(Refer to step 1 …)

I do feel slightly concerned that you’ve identified that it is not stricly correct. Even though it works, there may be a scenario where it won’t if it’s not set up correctly.