https://supertokens.com/ logo
y

yiannis.gkoufas

04/08/2022, 10:14 AM
Hi everyone, I setup a flask backend according to the sample https://github.com/supertokens/supertokens-python/blob/master/examples/with-flask/with-thirdpartyemailpassword/app.py and my react frontend according to the recipe. There seems to be something wrong with my CORS configuration because I am getting: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource
r

rp

04/08/2022, 10:15 AM
Hi everyone, I setup a flask backend according to the sample https://github.com/supertokens/supertokens-python/blob/master/examples/with-flask/with-thirdpartyemailpassword/app.py and my react frontend according to the recipe. There seems to be something wrong with my CORS configuration because I am getting: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource
hey!
How are you querying from the frontend?
y

yiannis.gkoufas

04/08/2022, 10:16 AM
just from the default login ui of the react recipe
n

nkshah2

04/08/2022, 10:17 AM
Can you post the configuration you used on the frontend and backend? (Stripping any API keys if you have used them)
y

yiannis.gkoufas

04/08/2022, 10:17 AM
tries to access "http://localhost:8080/auth/session/refresh" and gets an error
yeap absolutely
app = Flask(__name__) app.make_default_options_response = make_default_options_response Middleware(app) CORS( app=app, supports_credentials=True, methods=["OPTIONS", "GET", "POST"], origins="http://localhost:3000", allow_headers=['Content-Type'] + get_all_cors_headers() )
SuperTokens.init({ appInfo: { appName: "SuperTokens Demo App", // TODO: Your app name apiDomain: getApiDomain(), // TODO: Change to your app's API domain websiteDomain: getWebsiteDomain(), // TODO: Change to your app's website domain }, recipeList: [ ThirdPartyEmailPassword.init({ signInAndUpFeature: { providers: [Github.init(), Google.init()], }, emailVerificationFeature: { mode: "REQUIRED", }, }), Session.init(), ], });
n

nkshah2

04/08/2022, 10:18 AM
Could you also include the part where you call
init
for SuperTokens on the backend
y

yiannis.gkoufas

04/08/2022, 10:18 AM
yep sure
n

nkshah2

04/08/2022, 10:19 AM
What values are
getApiDomain
and
getWebsiteDomain
using?
y

yiannis.gkoufas

04/08/2022, 10:19 AM
init( app_info=InputAppInfo( app_name="my app", api_domain="http://localhost:8080", website_domain="http://localhost:3000", api_base_path="/auth", website_base_path="/auth" ), supertokens_config=SupertokensConfig( # try.supertokens.com is for demo purposes. Replace this with the address of your core instance (sign up on supertokens.com), or self host a core. connection_uri="http://localhost:3567", api_key="xxxxxxxxxxx" ), framework='flask', recipe_list=[ session.init(), # initializes session features thirdpartyemailpassword.init( providers=[ # We have provided you with development keys which you can use for testsing. # IMPORTANT: Please replace them with your own OAuth keys for production use. Google( client_id='1060725074195-kmeum4crr01uirfl2op9kd5acmi9jutn.apps.googleusercontent.com', client_secret='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' # ), Facebook( # client_id='FACEBOOK_CLIENT_ID', # client_secret='FACEBOOK_CLIENT_SECRET' ), Github( client_id='467101b197249757c71f', client_secret='e97051221f4b6426e8fe8d51486396703012f5bd' ) ] ) ] )
on the react side? export function getApiDomain() { const apiPort = process.env.REACT_APP_API_PORT || 8080; const apiUrl = process.env.REACT_APP_API_URL || `http://localhost:${apiPort}`; return apiUrl; } export function getWebsiteDomain() { const websitePort = process.env.REACT_APP_WEBSITE_PORT || 3000; const websiteUrl = process.env.REACT_APP_WEBSITE_URL || `http://localhost:${websitePort}`; return websiteUrl; }
just the defaults on the samples
only thing I changed is the localhost for the supertokens server
n

nkshah2

04/08/2022, 10:20 AM
Ah and just to make sure, when you start your React app it starts on port
3000
correct?
y

yiannis.gkoufas

04/08/2022, 10:20 AM
yep yep
backend on 8080
and supertokens on 3567
n

nkshah2

04/08/2022, 10:25 AM
Do you see any error logs on your server?
y

yiannis.gkoufas

04/08/2022, 10:27 AM
just this: "OPTIONS /auth/session/refresh HTTP/1.1" 404 -
r

rp

04/08/2022, 10:34 AM
Can you try it by removing the
methods
field in CORS?
y

yiannis.gkoufas

04/08/2022, 10:35 AM
same error 😦
r

rp

04/08/2022, 10:36 AM
Can you put CORS above the Middleware(app) and see if that works?
y

yiannis.gkoufas

04/08/2022, 10:37 AM
same 😦
r

rp

04/08/2022, 10:39 AM
Are you getting 404 for other OPTIONS endpoints as well?
y

yiannis.gkoufas

04/08/2022, 10:40 AM
don't have any other endpoints for OPTIONS
n

nkshah2

04/08/2022, 10:40 AM
Also could you post the full setup code (including imports and such), just to make sure nothing got missed
y

yiannis.gkoufas

04/08/2022, 10:40 AM
yeap, one sec
n

nkshah2

04/08/2022, 10:44 AM
Hmm nothing looks out of place, we will look into it. In the meantime could you create and issue for this on our
supertokens-python
repo?
y

yiannis.gkoufas

04/08/2022, 10:45 AM
also these are the versions of my dependencies: supertokens-python = "^0.6.2" python-dotenv = "^0.20.0" Flask-Cors = "^3.0.10"
n

nkshah2

04/08/2022, 10:45 AM
Btw the sample app has this snippet at the bottom of the file
Copy code
@app.route("/", defaults={"path": ""})  # type: ignore
@app.route("/<path:path>")  # type: ignore
def index(_: str):
    return ''
I think in your example you have modified that piece of code
Could you try using the same snippet as the sample and trying it out?
r

rp

04/08/2022, 10:47 AM
Yea that's the missing part. It is required so that flask doesn't return 404 for APIs we have exposed via our middleware
y

yiannis.gkoufas

04/08/2022, 10:49 AM
yeah hm right, I did it now and now it fails fails on another call: http://localhost:8080/auth/authorisationurl?thirdPartyId=google
n

nkshah2

04/08/2022, 10:49 AM
Whats the error you see?
y

yiannis.gkoufas

04/08/2022, 10:49 AM
"OPTIONS /auth/authorisationurl?thirdPartyId=google HTTP/1.1" 404 -
Cross-Origin Request Blocked: The Same Origin Policy
r

rp

04/08/2022, 10:51 AM
Can you show how you have added those four lines pointed out by @User
y

yiannis.gkoufas

04/08/2022, 10:54 AM
that's perfect, it works now as expected!
n

nkshah2

04/08/2022, 10:55 AM
Awesome, im glad you got it to work
y

yiannis.gkoufas

04/08/2022, 10:56 AM
I think the reason I removed it is that I tried a non-existing route (like /foo) and got that error:
n

nkshah2

04/08/2022, 10:57 AM
Hmm, we will need to take a closer look at that. But in the meantime if you have any other issues feel free to ask!
y

yiannis.gkoufas

04/08/2022, 10:58 AM
thanks so much again! it just seems this setting "catches" all routes?
n

nkshah2

04/08/2022, 10:59 AM
Well it would get to that point if no other route matches, but yeah thats the idea
y

yiannis.gkoufas

04/08/2022, 10:59 AM
I know its a tiny optimization and not a bug, but is there a way to avoid that?
n

nkshah2

04/08/2022, 11:01 AM
It is a behaviour that may need to change and we will need to look into this so unfortunately I dont have any workarounds for you. If you like you could create an issue for it and track the status of this that way?
y

yiannis.gkoufas

04/08/2022, 11:03 AM
yep yep perfect, makes sense!
r

rp

04/08/2022, 11:27 AM
@User you can use this instead of what was pasted before:
Copy code
@app.route('/', defaults={'u_path': ''}) # type: ignore
@app.route('/<path:u_path>') # type: ignore
def catch_all(u_path: str): # type: ignore
    abort(404)
The above will show a proper 404 page when you visit a path that doesn't exist
y

yiannis.gkoufas

04/08/2022, 4:45 PM
@rp thanks so much! will try it out!
4 Views