How to use devise-jwt with devise for signin, signup and signout in rails api

Question

I am using rails for the backend using devise-jwt and react for the frontend part.

I am following this https://github.com/waiting-for-dev/devise-jwt/blob/master/README.md

my routes.rb file contains:

 Rails.application.routes.draw do
  # remove this in production
  require 'sidekiq/web'
  mount Sidekiq::Web => '/sidekiq'

  namespace :api, defaults: { format: 'json' } do
    namespace :v1 do
      devise_for :users, :controllers => {sessions: 'api/v1/sessions', registrations: 'api/v1/registrations'}
    end
  end
end

my registrations_controller.rb (app/controllers/api/registrations_controller.rb)

class Api::V1::RegistrationsController < Devise::RegistrationsController
  respond_to :json, :controllers => {sessions: 'sessions', registrations: 'registrations'}

  before_action :sign_up_params, if: :devise_controller?, on: [:create]

  def create
    build_resource(sign_up_params)

    if resource.save
      render :json => resource, serializer: Api::V1::UserSerializer, meta: { message: 'Sign up success', token: request.headers["Authorization"] }, :status => :created
    else
      render :json => resource, adapter: :json_api, serializer: ActiveModel::Serializer::ErrorSerializer, meta: { message: 'Sign up success' }, :status => :created
    end
  end


  protected

  def sign_up_params
    params.require(:sign_up).permit(:first_name, :last_name, :mobile, :email, :password, :password_confirmation)
  end
end

my sessions_controller.rb (app/controllers/api/sessions_controller.rb)

class Api::SessionsController < Devise::SessionsController  
  respond_to :json
end

my application_controller.rb (app/controllers/application_controller.rb)

class ApplicationController < ActionController::Base
end

Basically what will be the next step to acees the token. I am confused. How will i get the acess token and use it to authenticate in the frontend react part.

not proficient in debugging ajax, though what is the output of console.log(`${CLIENT_URL}${uri}`); — seethrough
– seethrough, Commented May 24, 2018 at 6:55
I feel like I've seen something like this, and I can't help but feel like it's either related to CSRF or referer policies. I'd recommend trying to disable CSRF temporarily, maybe you're getting the wrong message. Or it could be related to marksayson.com/blog/setting_http_security_headers_in_rails — Petercopter
– Petercopter, Commented May 25, 2018 at 21:59

Taylor Allred · Accepted Answer · 2018-06-01 06:11:22Z

Assuming you have your server-side setup the response will include an Authorization Header.

On the front-end you'll make request to sign in and have a callback to catch the response:

 window.fetch(LOGIN_URL, dataWithLoginInfo).then(response => {
    const jwt = response.headers.get('Authorization').split('Bearer ')[1];
    window.sessionStorage.setItem('jwt', jwt);
  }).catch(handleError)

Next make the requests with the Authorization header included:

const token =  window.sessionStorage.getItem('jwt')
const headers = { Authorization: `Bearer ${token}` }

or use it in your app after you decode it:

import jwt from 'jsonwebtoken';
const decodedToken = jwt.decode(window.sessionStorage.getItem('jwt'));

if (decodedToken.isAdmin) {
  return <AdminPage />;
} else {
  return <NotAdminPage />;
}

You'll use something like https://www.npmjs.com/package/jwt-decode or https://www.npmjs.com/package/jsonwebtoken to decode the token and read the information from it like id, roles, permissions, etc.

You really need to follow a tutorial like: https://auth0.com/blog/secure-your-react-and-redux-app-with-jwt-authentication/ or http://jasonwatmore.com/post/2017/12/07/react-redux-jwt-authentication-tutorial-example. Then have some local expert take a look at all your code.

Collectives™ on Stack Overflow

How to use devise-jwt with devise for signin, signup and signout in rails api

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related