I am trying to create a React Native / Expo app where I can use the YouTube Data V3 API's (video insert) but I am having difficulty understanding how to use fetch() in React Native to get the access_key by authenticating a google user through Google oauth2 consent screen.
This is my code so far:
fetch(
'https://accounts.google.com/o/oauth2/v2/auth?' +
'client_id=' + clientId + '&' +
'redirect_uri=http://localhost:19006&' +
'response_type=token&' +
'scope=https://www.googleapis.com/auth/drive.metadata.readonly&' +
'include_granted_scopes=true&' +
'state=pass-through value',
{
method: 'GET'
}
);
I am getting from origin 'http://localhost:19006' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. and Uncaught (in promise) TypeError: Failed to fetch error in Chrome console. If I copy paste the link in a new tab in my browser the consent page is working.
I managed it to work using Javascript code but in React Native I can't get it to work. I am following the documentation at https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow#js-client-library
I searched GitHub and StackOverflow for possible solutions but I can't find any for React Native/Expo. I also tried the Node.Js Googleapis client library but as I understand it is not compatible with React Native/Expo.
You can try to use the following npm package or search for the relevant npm package like below for AppAuth react-native:
https://github.com/FormidableLabs/react-native-app-auth
Also check out the documentation or example:
https://developer.okta.com/blog/2018/03/16/build-react-native-authentication-oauth-2
Related
I'm new in React native developpement, i'm working on an app for packages inventory with Front-End React native and Backend-end DOT NET Core API.
I use Axios to call the APIs, my backend is set up to run with HTTPS on an IIS server.
when i test in local every thing works perfectly but when i test with the Back-End published the Axios return [Network Error].
i suspect the problem is from the HTTPS protocol but i'm n ot sure.
this is my Axis call:
axios.post(`https://company-soft.com/api/login`,
{
username:username,
password:password
})
.then((e)=>
{
console.log(e.data);
})
.catch((err)=>
{
console.log(`login error: ${e}`);
});
PS:i tested the API with Postman and it is responding fine.
i already tried some codes to override the SSL verifivation like the httpsAgent but i'v been told that it dosen't work with react Native.
is there a way to do it with Ract Native and Axios ??
Thanks a lot.
I am using Expo managed Workflow with react-native and trying desperately to not have to eject. The only sticking point in the entire app is allowing users of the app to upload video into a usable format. I am hoping to use Vimeo as the video hosting service.
I am authenticated and verified and interacting with the Vimeo API.
On my express server when I run this code:
let Vimeo = require('vimeo').Vimeo;
let client = new Vimeo({vimeo creds});
client.request({
method: 'GET',
path: '/tutorial'
}, function (error, body, status_code, headers) {
if (error) {
console.log(error);
}
console.log(body);
})
I see this message:
message: 'Success! You just interacted with the Vimeo API. Your dev environment is configured correctly, and the client ID, client secret, and access token that you provided are all working fine.',
next_steps_link: 'https://developer.vimeo.com/api/guides/videos/upload',
token_is_authenticated: true
I successfully uploaded a video from my express server using this code and placing the file on the same directory as the server code.
client.upload(
"{filename}",
{
'name': ' Test Video 1',
'description': 'The description goes here.'
},
function (uri) {
console.log('Your video URI is: ' + uri);
},
function (bytes_uploaded, bytes_total) {
var percentage = (bytes_uploaded / bytes_total * 100).toFixed(2)
console.log(bytes_uploaded, bytes_total, percentage + '%')
},
function (error) {
console.log('Failed because: ' + error)
}
)
Then, I added the same functionality to my web app locally for testing but not on an express server, trying to do it within a react native app running in a browser (for starters). I still get the message that says I am successfully interacting with Vimeo API and that I am authenticated.
However, When I try to add the file in the react native app with the exact same code, except this is how I am accessing the video file from react native: filename = require({pathToFile});
and the failed response says:
"Failed because: Unable to locate file to upload."
I do not know if the message is incorrect and if Vimeo API is having issues understanding the file or if it could be that because I am no longer running on a server.
So I keep trying to make sense of how to do this but wonder if I am missing something at this stage of testing.
Because...
I am able to upload the video to Firebase Storage by using expo-image-picker.
When I try to give the Vimeo API the file from what I have retrieved from the filesystem, it still says it is unable to locate file to upload.
In this case the string I am trying to upload looks like this: data:video/quicktime;base64,AAAAHGZ0eXBtcDQyAAAAAW…5AQLMKwEjd8ABNvCVAUgYoQFR1yYBVZYxAVX9NwFXEy8BYh0m
Any suggestions of a way to get Vimeo api to recognize this file?
I really want to use Vimeo for this project I can't find anything on stack overflow related to this except this one question which noone has attempted to answer:
Failed because: Unable to locate file to upload but path is correct (Vimeo API)
I am trying to get the API on the react-native interface by calling with Axios but getting a network error. My API is written in .net core version 3.0.
I have successfully tried postman but failed to call
Please help me fix it.enter image description here
enter image description here
You can passing header in your axios request to fix CORS as Ketan Rampteke's reply.
Follow link .
Chào thân ái người anh em <3
I have implemented the package "react-native-login-keycloak" for react native app. But when I tried to login with the keycloak, it returns an error "Unexpected error when handling authentication request to identity provider". I think its because of the invalid redirect uri. So, where do I get my app uri/redirect uri for the react native app. Any helps appreciated. Thanks.
#Rahul, Trying to Answer. Are you looking for the callback url to be exposed from App to return back after Authentication flow or after token flow.
REDIRECT_URI_SCHEME
For Inter-App like Browser of Mobile app to talk to your application
1 Private URI Scheme
YOUR_APP_NAME://oauth2/redirect , where YOUR_APP_NAMe could com.orgname.demoapp [ demo is for example]
2 Claimed HTTPS URI Scheme
https://YOUR_APP_NAME://oauth2/redirect
LoopBack Option
http://localhost:/oauth2/redirect [ Problem is the port should be free and not assigned already by anyother application installed in mobile.
Please check below Links
Some relevant post on the same
Different URI Schemes
I have 2 items set up in Auth0:
Application - Single Page Application
API - Custom API, machine to machine
I've followed the instruction in the link below to call the custom API:
https://auth0.com/docs/quickstart/spa/vuejs/02-calling-an-api
I've downloaded the sample with settings configured for both items mentioned above. The Vue app are able to log in correctly, and are able to call the external API by using the downloaded example codes (the external API, "backend", in the example code was written in Node JS).
However, when I change the backend to my Laravel/Lumen app which already set up for item no.2 (custom API), the Vue app received 401 unauthorized error. So, I copied the access token retrieved through Vue:
const accessToken = await this.$auth.getTokenSilently();
console.log(accessToken);
And try to call the Lumen backend with this access token - and it works perfectly fine!
Is there a setting somewhere that I might've missed to enable Vue & Lumen to work with Auth0?
p/s: The custom Lumen API was made following the instruction from:
https://auth0.com/blog/developing-restful-apis-with-lumen/
Ok it turns out I made a mistake in the axios part of the sample code. The sample is using get, while my API is using post. So I ended up sending the header in the wrong axios parameter. Hope this helps someone that encountered the same problem.