I'm fairly new to React Native and Expo, and I'm confused about how cookies are managed. I have an Express server that sets a token cookie in a response (res.cookie("jwt",token)). Somehow when my React Native client makes an authentication request and receives a response, the client stores the cookie somewhere, and the token is passed in future requests (with credentials: "include"), until I restart the emulator. My main questions are
Where are these cookies stored?
How can I access them?
I was under the impression that React Native doesn't really support cookies. Is this functionality specific to Expo?
If I were to deploy this as a real mobile app, can I rely on this cookie behavior, or should I use one of the React Native cookie management packages?
Thank you in advanced for your help!
ReactNative does not have this support by default as it runs on the native side (well, you do have support on the WebView component but that's isolated)
If you are relying on Expo they are still figuring out the cookies management, you can follow the updates in this issue, they are aware about the persistence of cookies been inconsistent between app loads:
https://github.com/expo/expo/issues/6756
If you have to use the cookies anyway I would suggest to use this lib, it seems quite stable, but maybe you will need to implement some integrations with your API yourself:
https://github.com/react-native-cookies/cookies
Wish success on your project.
Related
I am using an Auth0 SPA application for React with the #auth0/auth0-react SDK. I want to wrap my app in Electron but also deploy it as a web app (therefore I cannot rely on using auth0 native application).
What I have tried doing is using file:///callback for redirect_uri (added it to the list of allowed login callbacks as well), which results in an The specified redirect_uri 'file:///callback' does not have a registered origin error.
What should I do in this situation?
I'd need a bit more context in what you are using. I tried simulating your situation and I got it working by:
Setting the Auth0Provider redirectUri to "file://callback" when the app is accessed through Electron (not to disrupt the web flow)
Initiate the login process with the function "loginWithPopup" instead of "loginWithRedirect" in the case of an Electron app
Set the allow callback URLs and allowed logout URLs with the value "file://callback", plus the web values you probably have set. In my case: "http://localhost:3000,file://callback"
Loaded the static React build files into the Electron webview.
Does this work for you?
I have a React app on 127.0.0.1:3000 / 192.168.0.104:3000 and a Laravel api on 127.0.0.1:8000.
My problem is, I can fetch the data on my computer (127.0.0.1), but it seems that the React app can't correctly get the data from the database when I access the React app from my phone on LAN (192.168.0.103).(I can see the React app)
Can someone help me to solve this problem or tell me what may cause this? Thank you.
I suspect you have a CORS policy error. I'm not familiar with Laravel cause you know, PHP, but a quick google search would probably tell you how to allow a foreign domain to have access to your api.
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
To verify you have a cors policy error, you'd have to open dev tools and take a look at the errors. However, I'm unsure if that's possible on a mobile browser. I never tried, so it could be possible. Again another google search would answer that for you.
I just solved this problem by myself. It is because that the client can not find the Laravel API on LAN. In Img A the port 8000 is not open on the machine, so the client can't access the API.
Img A
My solution is that host the API and APP on the different machine and make sure that the client can access both the APP and API.
Img B
Is it possible to build a React Native App with a log-In screen that simulate/mirror a popup window of web-App having in mind that we don't have access neither to the server nor to the database of this web-app?
Thanks
I think the answer will be no, while this might technically possible.
You can of course mirror everything an already implemented login does, from the client side, including the HTTP requests to the server but usually that is very uncommon.
What someone usually does is
either use an existing pattern to talk to a backend service
or implement one (also on the backend side)
In general, you do not want to have any security features implemented in the frontend as it can be manipulated.
I want to retrieve secrets from keyvault in React application by passing clientid, clientkey and tenantid. Followed the below sample but receiving the error - "EnvironmentCredential is not supported in browser".
https://github.com/Azure/azure-sdk-for-js/blob/master/sdk/keyvault/keyvault-secrets/samples/typescript/src/helloWorld.ts
Application - React [TypeScript]
Browser - Chrome 86.0
Thanks.
Deb
The error is intended- the DefaultAzureCredential() is supported in Node (server-side JS) but not client-side Javascript: https://github.com/Azure/azure-sdk-for-js/issues/10645
The primary reason for this is because it's usually a serious security hole to expose your clientKey to anyone browsing your site.
If your React app is using an API, then it's best to have React call your API and then have the API talk to Key Vault. If you don't have one currently, then something like a simple Functions or Logic app can act as an API for you. (Functions in particular has a free tier if your site is low traffic).
If you understand the risks and still want to do this in the browser, you have a couple options- you can create the TokenCredential yourself to pass into the client, or you can skip the SDK and call the API directly.
I currently have a Single Page Application using( React+Redux+React-Router) hosted on firebase hosting. I want to implement server side rendering, for which I am aware I need to run a node/express server on something like Heroku, but I'm unclear how to do this. I have seen many starter boilerplates i.e Este that incorporate server-side-rendering but I want to add this capability to an existing Project. Somehow, The static content hosted on firebase should have access to my server but again unclear how to implement it so i can get al the benefits involved with SSR.
Since you are already using Firebase you can utilize Firebase functions.
Just setup a new function which intercepts your http request and then you just fetch all the stuff you need and render to a string with react routers render to string method.
There is a good tutorial covering all the bits and pieces of this here
https://m.youtube.com/watch?v=82tZAPMHfT4