Firebase Auth - ConfirmPasswordReset, how to grab oobcode from URL to pass thorugh function?

Question

I'm trying to implement a reset password Page on my website using firebase auth. I got the send email to reset password page working. Now from what I understand you get an email with a link that you need to click and on this email there will be a code that is needed to reset the password. Now I'm at a loss on how to grab said code from the url and already display it for the user on the field. Is it possible to have the code come in the body of the email and have the user input the code? If not, how do I grab the code from the url and input it for the user so the user can only input the password? My website is using vue and this is what I have so far

<template>
  <div class="container">
    <h3>reset pw page</h3>
    <div class="row">
      <form @submit.prevent="ResetPw()" class="col s12">
        <div class="row">
          <div class="input-field col s12">
            <input type="password" id="password" v-model="password" />
            <label>Password</label>
          </div>
        </div>
        <div class="row">
          <div class="input-field col s12">
            <input type="text" id="code" v-model="code" />
            <label>Code</label>
          </div>
        </div>
        <button type="submit" class="btn">Submit</button>
      </form>
    </div>
  </div>
</template>

<script>
import firebase from "firebase/app";
export default {
  data() {
    return {
      password: "",
      code: ""
    };
  },
  methods: {
    ResetPw() {
      firebase
        .auth()
        .confirmPasswordReset(this.code, this.password)
        .then(() => {
          console.log(`Password Changed!`);
        })
        .catch(err => console.log(err));
    }
  }
};
</script>

I think I got everything done, I just need to understand how to grab the oobcode from the link https://my-project.firebaseapp.com/__/auth/action?mode=&oobCode=

score 1 · Answer 1 · answered Aug 24 '20 at 04:08

If you are using react-router, it does not parse the query any more, but you can access it via location.search

const params = new URLSearchParams(this.props.location.search);
const code = params.get('oobCode')
const email = await firebase.auth().verifyPasswordResetCode(code)

Alternatively, instead of using this.props.location.search, you can do new URLSearchParams(window.location.pathname)

score 0 · Answer 2 · answered Feb 28 '20 at 19:41

Not sure how to grab the oobCode from the body of the email but to grab the code from the URL once the page loads, you can refer to this question: how-can-i-get-query-string-values-in-javascript. In your form, create a hidden input for the code with an empty string value. Once window loads, code will be grabbed from URL and then you can pass the code and password into the function

<body>
  <form>
    <input type="text" id='newPass' name='newPass' placeholder='New password'>
    <input type="hidden" id='code' name='code' value="">
    <button type='submit'>Submit</button>
  </form>
</body>

<script>
$(window).load(function () {
    function getParameterByName(name, url) {
        if (!url) url = window.location.href;
        name = name.replace(/[\[\]]/g, '\\$&');
        var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, ' '));
    }
    var code = getParameterByName('oobCode')
    document.getElementById('code').value = code;
</script>

Hope this helps!

Firebase Auth - ConfirmPasswordReset, how to grab oobcode from URL to pass thorugh function?

2 Answers2