Implementing Okta in React Native and get: Response to preflight request doesn't pass access - react-native

I'm implementing the Okta signin widget with React Native
I get this:
Failed to load https://dev-827074.oktapreview.com/api/v1/sessions/me: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
After trying to login, I get the following:
UnsupportedBrowserError {name: "UNSUPPORTED_BROWSER_ERROR", message: "There was an error sending the request - have you enabled CORS?"}

We've received similar errors from Okta. What we had to do is add the hostname for the server that hosts the webview as a Trusted Origin.
API -> Trusted Origins -> Add Origin
You can add multiple origins, you probably need to add http://localhost:3000.

You may need to add http://localhost:3000/implicit/callback to your app's Login Redirect URI's in the General Settings of your Okta app

The API you have written does not support CORS. CORS or Cross origin resource sharing allows a web app to submit requests to an API belonging to a different domain. This setting should be enabled on the API side.
This is how it works, whenever a request is sent to a different domain, an OPTIONS method is sent to the server. The server responds back with available options for the web app. If the verb is supported, the browser will send the actual request with the appropriate verb or method (For example, GET or POST). If the verb is not supported, you get the above error message.
In short, enable CORS for your API. If it is a Node / Express API it is just a simple cors package you need to add to your project and use.

Related

Sending xAPI statement to a web application instead of LRS

I have an xAPI content made by storyline I want for the statement to be sent to a webapp instead of the LRS.
this webapp is developped using laravel, and user should be authenticated with email and password to use it.
what I did to send the statement to this app:
1.in the webapp I created an API endpoint route that use POST method.
2.in the xAPI wrapper I changed the endpoint in the configuration to the route I made in the webapp.
const conf = {
"endpoint":"here I added my api endpoint route of the webapp",
"auth":"Basic " + toBase64(""),
}
now whith any interaction with the content where a statement should be sent the request making cors error like in the picture down, I think this is authentication error, how can I add my authentication credentials to the xAPI wrapper?
Your non-LRS LRS is probably not handling preflight requests which are necessary for CORS handling. Most common LRSs will handle those requests appropriately since they expect to be accessed from additional origins. See https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#preflighted_requests
Also note that you'll likely run into issues unless you also handle state requests.
Additionally unless you are requesting the credentials from the user during runtime then hard coding the credentials into the package isn't a great idea from a security perspective.

OAuth2 Authentication Flow - Does client GET my oauth2 server url or open that page in their browser?

I'm trying to write an OAuth2 authentication flow for my site, and currently I can't get past a CORs error. Let's say I want them to go to Discord oauth2 page to authenticate.
Option 1) The current user flow from the browser is making a GET request to my url myserver.com/oauth2. This endpoint on my server redirects to discord oauth2 page. I allowed cors but this option is not working currently and I'm getting a CORS error.
Access to XMLHttpRequest at 'https://discord.com/oauth2/authorize?blahblahblah' (redirected from
'myserver.com/discord/oauth2') from origin 'http://localhost:3000' has been
blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Option 2) But instead, if I actually make the browser go to my server endpoint myserver.com/discord/oauth2 with an <a> link tag for example, it works. But this seems more janky - takes a few more milliseconds to load.
Question: Is the proper flow to make a GET request to the server and then get redirected (option 1), or is it proper to actually go to the website via an anchor tag for example?

GitHub Search API Authentication

I'm trying use the GitHub API to search for Repositories through my app, but every time I send a request from my app I get authentication error:
Request forbidden by administrative rules. Please make sure your request has a User-Agent header (http://developer.github.com/v3/#user-agent-required). Check https://developer.github.com for other possible causes.
The send request that I send is this:
https://api.github.com/search/repositories?q=atom
I know that I have to provide a username in order to authenticate , but how do I do that withing the request? I don't seem to be finding it in the documentation.

AWS API Gateway how to enable CORS to only listen request from Stripe.com?

I have an endpoint on API Gateway that I want to make it work with requests from Strip.com only. I have tried adding stripe.com on Access-Contril-Allo-Origin* as it shown below but does not seem to be working at all.
How do I set CORS on API Gateway?
CORS only applies to requests made from a browser. It doesn't apply if you're trying to protect, for example, a webhook URL that you want Stripe to send data to. The typical approaches here are either to include a shared secret in your webhook URL, or to configure a username & password, both of which Stripe support. Examples:
https://yourdomain.com/admin/webhook/6f637faa33a2116f410cfb12af2028a85d22fcf5
https://user:pass#yourdomain.com/admin/webhook/
The other protection here is that you can verify any event received by sending an API request to Stripe to retrieve that event:
https://stripe.com/docs/webhooks#verifying-events
I think you need to have the schema on the header, like, https://stripe.com as Access-Control-Allow-Origin

Cross Domain Error Worklight Adapter Request

I'm trying to make a GET request from an iPhone app(built on Worklight), to a remote worklight adapter on a remote server.
I have generated the authorization request header using the following
http://remote-url:port/project/authorization/v1/testtoken
However, I keep getting the following cross domain error:
XMLHttpRequest cannot load https://remote-url/project/adapters/call/mq/getAccounts/22. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://myapp-url:port' is therefore not allowed access.
But, when I try do the same GET request using an API tool like Postman, I receive the results no issues on my browser.
First - testtoken is only available from the MobileFirst Studio development environment... you need to take this into consideration.
Second, you're likely using Chrome and Crome disallows CORS by default. Change your browser settings and/or try in a different browser.