search

OSMCha / osmcha-frontend

Frontend for the osmcha-django REST API
https://osmcha.org
ISC License
124 stars 38 forks source link

Unable to sign in using the local development setup instructions #409

Open modulitos opened 5 years ago

modulitos commented 5 years ago

I'm submitting a (bug report)

Brief Description

The README instructions for signing in to the app during local development are failing.

I was able to sign in using a workaround. We may want to add this workaround to the README.

What is the current behaviour, (attach relevant screenshots) ?

When following the "to sign in" instructions in the README's "local development" section, step 4 fails, preventing the user from signing in.

What is the expected behaviour ?

After pasting the oauth_verifier value into the "sign in" section, we should be able to click "submit" and log in.

When does this occur ?

Nothing changes in the UI, and we are not signed in.

It looks like a POST is sent to the following endpoint: https://osmcha-django-staging.tilestream.net/api/v1/social-auth/

which results in a 500 with the following HTML response:

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="google" value="notranslate"><link rel="shortcut icon" href="https://osmcha-django-staging.tilestream.net/favicon.ico"><link rel="preconnect" href="https://osmcha-django-staging.tilestream.net"><title>OSM Changeset Analyzer</title><script type="text/javascript">"http:"==location.protocol&&(location.href=location.href.replace(/^http:/,"https:")),function(o){if(console.log(o.host.indexOf("github.io")),o.search&&-1<o.host.indexOf("github.io")){var t={};o.search.slice(1).split("&").forEach(function(o){var i=o.split("=");t[i[0]]=i.slice(1).join("=").replace(/~and~/g,"&")}),void 0!==t.p&&window.history.replaceState(null,null,o.pathname.slice(0,-1)+(t.p||"")+(t.q?"?"+t.q:"")+o.hash)}}(window.location)</script><link href="https://osmcha-django-staging.tilestream.net/static/css/main.7ce553c2.css" rel="stylesheet"></head><body><div id="root"></div><script type="text/javascript" src="https://osmcha-django-staging.tilestream.net/static/js/main.8068de17.js"></script></body></html>

Getting a 500 from this endpoint seems to be the cause of the failure.

How do we replicate the issue ?

Repeat steps 1-4 in the "to sign in" instructions here: https://github.com/mapbox/osmcha-frontend#local-development.

Step 4 fails with the 500 described above.

Please tell us about your environment:

Node: 9.1.0 Browsers: Tested on both Firefox 70.0 and Chromium Version 78.0.3904.70 OS: ArchLinux

Other Information / context:

With some help from @batpad, we came up with the following workaround:

  1. Navigate to the staging site: https://osmcha-django-staging.tilestream.net/

  2. Enter localStorage.getItem('token') into the console to get your token. Copy that token.

  3. Then navigate back to https://localhost:3000 and enter localStorage.setItem('token', <your-token>) into the console, but pasting in the token for <your-token.

  4. Refresh the page. We should be signed in now.

willemarcel commented 5 years ago

Hi @modulitos !

I tested it here and I could authenticate. I think the problem is that you're getting the wrong token, try with localStorage.getItem('oauth_token') or get the oauth_token on the redux web inspector panel.