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.
1 Answers
Answers 1
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.
0 comments:
Post a Comment