How do I get redirected to the right url with emailed confirmation and password reset links with ng-token-auth and devise-token-auth?

Question

I am trying to use ng-token-auth (Angular 1) on a separate frontend to allow passwords to be reset and account e-mail addresses to be confirmed on a Ruby on Rails 5.0 backend.

After I click the link that hits the authentication api I am getting redirected to this:

http://localhost:8080/?client_id=<client_id>&config=default&expiry=<expiry_stamp>reset_password=true&token=<token>&uid=<email address>#/reset-password

The /#/reset-password portion is getting placed at the end of the reset link.

I think to get angular and my functions working properly I need something that resembles: http://localhost:8080/#/reset-password?client_id=&config=&expiry=&reset_password=&token=&uid=

In app/views/devise/mailer/reset_password_instructions.html.erb I have the following template code:

    <p><%= t(:hello).capitalize %> <%= @resource.email %>!</p>

    <p><%= t '.request_reset_link_msg' %></p>

    <p><%= link_to t('.password_change_link'), edit_password_url(@resource, reset_password_token: @token, config: message['client-config'].to_s, redirect_url: message['redirect-url'].to_s).html_safe %></p>


    <p><%= t '.ignore_mail_msg' %></p>
    <p><%= t '.no_changes_msg' %></p>

Inside of my app.js on the frontend, I am configuring $authProvider with the following:

   function AuthSetup($authProvider) {
     $authProvider.configure({
      apiUrl: 'http://localhost:3000',
      passwordResetSuccessUrl: 'http://localhost:8080/#/reset-password'
    });
   }

I would greatly appreciate any help or guidance anyone could offer. Thanks.

Answer 1

Sorry for the late reply. What I did is just override the Devise::ConfirmationController from Rails backend and it worked for me.

sharing the code snippet below:

class User::ConfirmationsController < Devise::ConfirmationsController

  def show
    self.resource = resource_class.confirm_by_token(params[:confirmation_token])

    if resource.errors.empty?
      set_flash_message(:notice, :confirmed) if is_navigational_format?
      sign_in(resource_name, resource)
      respond_with_navigational(resource){ redirect_to after_confirmation_path }
    else
      redirect_to after_confirmation_path, notice: 'Not a valid token'
    end
  end

  protected

  def after_confirmation_path
    return 'http://localhost:4000' if Rails.env.dev?
    'http://example.com'
  end
end

If the token is is valid then it will sign-in the user and redirect them to front-end site where your angular code is running, If token is not valid then it will redirect them to site along with a flash message. please let me know if you need any help on understanding this piece of code.