[SOLVED]Setting up Oauth with tunneling solution like ngrok, localtunnel while hosting on localhost

Hi, i am currently hosting appwrite on my local machine using docker and i am developping the frontend with flutterflow. In order to let both flutterflow and appwrite be able to communicate i set up a tunneling solution which forwards traffic from http://127.0.0.1 to a custom subdomain over https and for email signups it works fine so far. Now i have set up Google Oauth and enabled it from within appwrite. the redirect url given by appwrite is obviously starting with http://127.0.0.1 while the one i entered in the google cloud console has the https custom subdomain one. When authenticating i am able to see traffic going from google to my appwrite instance on my local machine through the tunnel but i get the 400 redirect_uri_mismatch error from google. After searching for a while i found out i need to make the default absolute url of appwrite match with my custom subdomain instead of localhost. how do i achieve this ?

TL;DR

The user is trying to set up Oauth with a tunneling solution like ngrok or localtunnel while hosting their app on localhost. They are having issues with the redirect URL mismatch when authenticating with Google. They are using a custom subdomain over HTTPS for the redirect URL in the Google Cloud Console, but Appwrite's default absolute URL is still using localhost. They are seeking guidance on how to make the default absolute URL of Appwrite match with their custom subdomain. Potential solutions include using the --hostname option with Appwrite or changing the proxy to support rewriting headers and proxying to Appwrite using HTTPS. Additionally, they may

Maybe this will help? https://stackoverflow.com/questions/40327672/configure-ngroks-cors-headers

@Steven thanks let me check please

Also, you might want to proxy to Appwrite using https

@Steven Levey i have checked the link but it doesnt help me that much...for the proxy using https you mean instead of having this : https://customdomain.ngrok.io -> http://127.0.0.1:80 i should change it to this https://customdomain.ngrok.io -> https://127.0.0.1:443 ?

Why doesn't the link help?

Yes

@Steven because i am not using ngrok specifically i am using another one called loophole since ngrok free tier doesnt allow for permanent custom subdomains. i have set up the proxy hor http:// 127.0.0.1 on port 443 on my local machine i am able to access appwrite via https although google chrome show s it as insecure. the proxy is also connected to it but the response now has changed and i get a 404....

@Steven can i get back to you after thoroughly read the link and see if i can apply the cors settings to my proxy ? It is either that or changing appwrite default endpoint which is http://127.0.0.1/v1 on my machine which iam not sure how to do that

In short, you'll need to make sure the host header is forwarded. Maybe use the --hostname option

@Steven Levey the --hostname option should be used while setting up appwrite or the proxy? if it is the latter, i already do use it in creating the custom sub domain

Hmm maybe your proxy doesn't support rewriting headers 🤷‍♂️

yeah i installed ngrok instead now and iam trying to configure the headers ...

Ill revert with the results soon

pffff still struggling although i switched to ngrok...iam gonna go 4 a walk and come back to it

@Steven Here are my findings so far; using ngrok i successfuly proxy to https://localhost:443 and when doing the google auth from flutterflow, it goes to appwrite which responds with a 301 as written in the docs. However (i have to mention this is my first time implementing oauth) in the response headers i see x-final-url which contains the url to the google page where i can select one of the test accounts to log in. In flutterflow the value expected is not in the headers so while testing i get a 403 google page as the response body . Since i am not able to capture the url value from the header within flutterflow ill export the code and see for myself if that is indeed the right result and see how i can expand upon it...I really wish the flutterflow template for appwrite covered oauth too or a guide

@Steven it was as expected the header x-final-url was the right answer. Iam running from flutterflow's test environment and since the api status code is 403 in the browser but when testing from flutterflow's api tester it is 200 , i modified the action to check for the api call failing and then grab the response header and open the url in a new tab from flutterflow. I managed to log in successfully, the user is created in appwrite however i am greeted with the following message in the screenshot below:

Not sure about that final URL

For flutter web, we typically set a success url to point to a page that completes the oauth

@Steven i guess that is what it is since i am running on the browser

the header containing the final url....i think although i got it to work it seems more like a hack tough

[SOLVED]Setting up Oauth with tunneling solution like ngrok, localtunnel while hosting on localhost

Reply to this thread by joining our Discord

Reply on Discord