title: Client side OAuth with google calendar api using React frontend and Rails backend
body: <p>So I'm trying to do google oauth to get a refresh token for my users (not actually using google oauth to save the user). I had everything working when I used the client side OAuth for google api but they don't provide a refresh token when you do that handshake, only an access_token. I need a persisted refresh_token since I'm going to be making a lot of requests to the users google calendars.</p>
  
  <p>So I set up omniauth on my rails server to make the flow go like this:</p>
  
  <p>user clicks authenticate with google (client side) -->   </p>
  
  <p>popup screen goes to backend server (<code>localhost:3001/users/auth/google_oauth2</code>) -->  </p>
  
  <p>backend rails server redirects to google for authentication -->  </p>
  
  <p>they authenticate with google and get redirected to backend server's callback (<code>localhost:3001/users/auth/google_oauth2/callback</code>) -->   </p>
  
  <p>backend server saves token for appropriate user and then redirects back to client side app on <code>localhost:3000</code> (nothing needs to be done on client, just need the token saved on my server for future use)</p>
  
  <p>I do however need to know that the authentication was successful so I can dispatch appropriate actions in react/redux. In redux-auth they check for the access_token inside the <code>popup.location</code> URI. Problem is when I use this server side popup flow I get this nasty http/https error:</p>
  
  <p><img src="https://i.imgur.com/v5NgIGr.png" alt="SecurityError">
  (original image: <a href="https://imgur.com/v5NgIGr" rel="nofollow noreferrer">http://imgur.com/v5NgIGr</a>)</p>
  
  <p>If instead of redirecting back to the client I just redirect to a view in my backend server I could then have a script on that page that just does <code>window.close()</code> which works but seems hacky to me. Another potential solution I was thinking was to try and use the <code>window.postMessage</code> api but I don't know if that has great browser support/also seems hacky.  I could emit a message to the other window (the main client app) from the popup saying the oauth was successful so my react code and do whatever it needs to do.</p>
  
  <p>I feel like I'm just approaching this whole flow completely wrong or I'm missing something obvious. </p>
  
  <p>I also feel like if I just had HTTPS on everything it would all work since before when it was 100% client side the popup worked beautifully and I didn't get this SecurityError.  I spent some time figuring out how to get my webpack dev server using https and tried doing the same with rails (think I did something wrong on the rails side) but it was still not working.  Also feel like I shouldn't need to force HTTPS on all my development servers in order to get it working...</p>
  
  <p>If anyone has any thoughts or could give me some direction that would be much appreciated!!</p>