Devise authentication with react on rails

1

Anybody have good resources to check out for how to implement devise authentication with react_on_rails? New to react_on_rails (and pretty new to react). Trying to keep what I like about rails (ruby, devise authentication) and implement the stuff I like about react (redux, JSX, etc)

Thanks!

2

@Michael_Lee, we’re including this in

As of right now, it’s only available to coaching clients.

Please get in touch with me if this interests you. We’ll get you on the fast track!

3

Well device integration is quite easy :slight_smile: Use the normal login box via layout and then start your websocket with a active session. Then you just need to use this code in your connection.rb

module ApplicationCable class Connection < ActionCable::Connection::Base identified_by :current_user 
def connect
  self.current_user = find_verified_user
  logger.add_tags 'ActionCable', current_user.email
end

def find_verified_user
  ## this is where devise stores the current user
  env['warden'].user || reject_unauthorized_connection
end

end
end
1 Like
4

Hey guys, I have a similar question! I’m also trying to use devise =D

When I attempt to login with the ‘dropdown login form’ i made in my navbar, it doesnt seem to work. I get this error:

Screen Shot 2017-04-03 at 11.45.17 AM.png2086×618 54.4 KB

But when I attempt to login on this page: http://localhost:3000/users/sign_in, I can sign in successfully. It’s the standard devise form that works from /users/sign_in.

After logging in, it takes me to my homepage and shows that i’ve logged in (because I check if current_user exists). I’ll then be able to sign out with a button on my homepage. However when I use my dropdown login form, I get the error from the beginning.

A lot of answers I’ve found on google involved adding protect_from_forgery with: :null_session to application_controller.rb. My guess as to what is happening is that the Rails app thinks the post request is coming from another app (which it is, right?) because the ‘React’ part of the app is it’s own client-side app. Does that make sense? If anyone can help bring light to the situation, I’d really appreciate it! Thanks Shakacoders! =D

P.S. Is devise the best way to handle user auth with React on Rails?

5

Well you did try to use a react-component to create the login, so you need to send the csrf parameters.

<meta content="authenticity_token" name="csrf-param" />
<meta content="ksTMDmMPB3v0b0Ge88tVRR99NwqTYJJ4RTa/gcU1CZY=" name="csrf-token" />

You can grab them from the page via js or pass them into the the component props

1 Like
6

Hey Mathias!

This worked, thanks a lot! I used ruby to get the token and I ended up passing the token as a prop to the react_component helper method in my index.html.erb page. I made a helper to get the token, and put it in helpers/application_helper.rb. Here’s the helper I made (for others’ future reference):

def csrf_token
	tags = csrf_meta_tags.split("\n")
	content = tags[1].split(' ')[-2]
	token = content[9..-2]
end

I passed it to my main react_component as a prop in my index.html.erb:

<%= react_component("App", props: { csrfToken: csrf_token }, prerender: false) %>

Then I just passed it along to other components within each Component.jsx. Example:

<Layout csrfToken={this.props.csrfToken}/>

And finally I added this line inside my login form (I personally added it second to the top within the form):

<input type="hidden" name="authenticity_token" value={this.props.csrfToken} />

I hope this helps someone else. Thanks again Mathias_Uhl!

Edit: How to get it in JS
Add this function to your react component:

getMetaTags () {
    const metaTags = document.getElementsByTagName('meta')
    return metaTags[1].content
  }
2 Likes