Expo tunnel not working (invalid certificate) - react-native

I'd like to use expo start --tunnel to allow connecting to the App over the internet.
However, right after starting, the DevTools open and show me the following error:
Error loading DevTools
ValidationError: "urlType" must be one of [exp, http, redirect, no-protocol]
The console shows me:
Starting Metro Bundler.
Tunnel URL not found (it might not be ready yet), falling back to LAN URL.
Tunnel URL not found (it might not be ready yet), falling back to LAN URL.
So far so bad.. I've then looked into the .expo/packager-info.json to see what URLs have been generated. The file looks like this:
{
"devToolsPort": 19002,
"expoServerPort": 19000,
"packagerPort": 19001,
"packagerPid": 7316,
"expoServerNgrokUrl": "https://sz-p2a.anonymous.123.exp.direct",
"packagerNgrokUrl": "https://packager.sz-p2a.anonymous.123.exp.direct",
"ngrokPid": 5316,
"webpackServerPort": null
}
Then I've tried to open these URLs on the target devices. When doing so, I get an SSLPeerUnverifiedException because of an invalid certificate. I think it's the same error that I get when navigating to the URL directly in the browser.
So, am I doing anything wrong or is the tunnel workflow broken right now?
What might I do to get it working?

I somehow bypassed this problem by removing https from the link.
To do so, take the expoServerNgrokUrl from .expo/packager-info.json and turn:
https://sz-p2a.anonymous.123.exp.direct
into
http://sz-p2a.anonymous.123.exp.direct
Then you can send it to any Expo device.

I had the same issue, logged out expo logout, logged in again expo login and it worked.

Related

Network Request Failed for Expo when using Json-Server

It's my first time using expo for mobile development. I am trying to fetch the API from the JSON-Server but there is always the network request failed error. I have seen many posts on this issue but none of which worked for me.
What I have done:
Change to LAN connection on Expo. Start the json-server and set the host as my IPv4 address, worked on web, not on my android mobile. Also fetch http://192.xxx:3000 using the IP instead of localhost.
Change to 10.0.0.2 which should work for android emulator, but since I am using physical device. It does not work for me as well.
Change to 0.0.0.0. Does not work on both web and mobile (the endpoint is not working in the first place).
I have no ideas what else I can do now so I would like to ask if anyone knows what is happening here?

Vue.js localhost giving a permission error

I have a Vue app that works on one (Windows) machine, but not on another (Mac) machine. The non-working one just gives a message "You do not have permission to access this app" in the browser.
The only error in the console is
DevTools failed to load source map: Could not load content for https://unpkg.com/#popperjs/popper.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
Any ideas? All my other Vue apps work fine
You didn't provide much information about what exactly you're doing that you're getting that error and where. That being said, this is likely not a Vue.js issue, rather a Mac OS issue with permissions. See if this question is related.
Additionally, the URL from the console https://unpkg.com/#popperjs/popper.min.js.map returns Cannot find package message, so it is indeed incorrect, the correct URL would probably be https://unpkg.com/#popperjs/core#2/dist/umd/popper.min.js.map

Auth0 stuck in callback

Used auth0 for my react project and it works fine at my local.
When i put my project to the server login page shows up, but after i try to login i get an error.
http://localhost:3000/callback?code=ZSaQ96OshsFfpBUN&state=q3KiPGbEPtIZ3UuSLd.KSbKjdXqk9-pD
firefox says
unable to connect - cant establish a connection to localhost:3000 and on
chrome i got
this site can't be reached - localhost refused to connect
I tried different callback urls on the auth0 side but nothing changed. I do not know exactly what to do actually
It looks like your project isn't running on the same connection that you were locally. Make sure to change all the registered callbacks to their current locations when changing to a different deployment.

Stop exp from switching to LAN URL when tunneling

When trying to run exp start --tunnel in a react-native project, I often see the warning:
22:15:31 [exp] Your URL is: exp://192.168.200.83:19000
....
22:15:31 [exp] Switched to a LAN URL because the tunnel appears to be down. Only devices in the same network can access the app. Restart with exp start --tunnel to try reconnecting.
This is a problem since none of my devices or the AVD can connect to this URL to download the project.
The problem does not seem to related to any firewall settings as it does not occur every time (just very consistently). When the error does not happen, I get a URL that I can work with that looks like:
22:44:38 [exp] Your URL is: exp://en-ux3.myexpousername.myapp.exp.direct:80
Is there something that can be done about this to get it to stop switching? What causes this switching exactly? Is there some way to get devices to be able to use this URL instead (I have an android device connected to same wifi, but seems to be unable to download the project from the LAN URL)?
** Totally new to react-native and expo, so if I am missing evidence of any common debugging steps for this kind of problem, please let me know what they may be in the comments so I can update the question.
UPDATE:
A similar question to this is addressed in the expo forums: https://forums.expo.io/t/switched-to-a-lan-url-because-the-tunnel-appears-to-be-down-only-devices-in-the-same-network-can-access-the-app-you-can-restart-the-project-to-try-reconnecting/4483.
I was having the message
Switched to a LAN URL because the tunnel appears to be down. Only devices in the same network can access the app. You can restart the project to try reconnecting.
And I've solved it closing Visual Studio (then pressing the Restart button from Expo XDE)

Safari Localhost Permission Blocked

So ran into this issue today, where I have a website that needs the geolocation of the user. It was working fine when running locally on localhost, but now I get an error saying "Access to geolocation was blocked over insecure connection to http://localhost:4200". WTF Apple? I also tried 127.0.0.1 but got the same result. Am I missing something in the dev settings or did Apple just break everything?
Safari Version: 9.1.3 (11601.7.8)
Maybe it's possible to use https ( How to get angular-cli to ng serve over HTTPS ) and if not is possible directly for some reason maybe you can use a transparent proxy that offers https.
Many HTML5 new features like access to webcam, geolocation and others are now allowed only on pages served thru https scheme, so probably using https will work again. If not, maybe is possible to modify hosts file to workaround the problem.
I found a sort of solution but it is a bit tedious. I use ngrok to route my server and then the geolocation works fine. The only thing I don't like is that it has limits (if you are using free account), like you can't refresh a lot of times.
edit:
To Use ngrok download it first, then on terminal type
./ngrok http <port number>
ngrok example.
It will then show you the url routes. I used https. Go to to that address.
More ngrok instructions and download