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?
Related
I am trying to tie my react app to firebase,
I understand the general idea behind but the it seems like there are few different binding
options depending on how much you want get into functionality of firebase.
0.0 basically without registering a firebase app in the project to my react app and using any service lets say from authentication or database. Ive been able to use make POST and GET request as well as sign up and in users without regiestering an app from firebase website.
just have to use the end points given by the service you wish to use.
1.0 I guess this is the more proper way which registering a firebase app to my react app
either by using npm or script/cdn. I am new to firebase so i did not know that i had to do this.
2.0 basically the same step as 1.0 but also initializing/configuring firebase app(?) with Firebase CLI which creates things like
A firebase.json configuration file that lists your project configuration.
A .firebaserc file that stores your project aliases.
this is now where i get confused as to how to go about combiniing with my react app.
for example, locally, react app is running on port 3000 but when i use CLI's firebase emulators: start script, what will happen to my react app which is running on 3000.
How do you guys set this up correctly? i guess it depend on how much backend i want to use but what i need firebase for mostly is to use authentication and database...
I am utterly confused about which platform configurations to use under Azure AD app's Authentication blade.
There are 2 platform configurations I am confused about:
"Web"
"Single-page application"
The app I have registered is a React JS app, which in my mind, is both a Web app AND a SPA.
This "rabbit hole" get's deeper as I'm trying to configure redirect URIs so i can use MSAL.js to authenticate and authorize within the app.
Essentially, it comes down to this (for my http://localhost:5000 development environment):
If I specify my URI under Web, then I get error:
AADSTS9002326: Cross-origin token redemption is permitted only for the 'Single-Page Application' client-type.
And from what ive been reading, Web platform is the way to go (not SPA).
Can somebody shed any light onto this convoluted area?
Which platform configuration should I be using for a ReactJS app?
Thank you.
• React js is mostly used to develop SPA (single page application) as it is a web application or website that interacts with the web browser by dynamically rewriting the current web page with new data from the web server, instead of the default method of the browser loading entire new pages. This means that the URL of your website will not change completely (page will not reload), instead it will keep getting content and rewriting the DOM with it instead of loading a new page. The goal is faster transitions that make the website feel more like a native app.
• When building you react-app, you can see that there is only one App.js from where your entire web-app is loaded in fragments and components. This behaviour of rendering components and pages on a single page and changing the DOM (is a single page behaviour and hence the name), instead of loading a new page with new content, this makes it feel like a single application.
• So, when you are using react js as a building code platform, I would suggest you use SPA as the platform in Azure AD app registration. That does not mean you cannot use react js to create an app on a remote web server and deploy it, you can but for hosting react js coded application script and running it as a worker process and provide a desirable output you need script execution backend runtime like ‘ngrok’ and ‘node.js’ to supplement the execution and provide compatibility with the web server environment.
Please refer below links for more information: -
Why is React Js called as Single Page Application
https://learn.microsoft.com/en-us/answers/questions/315313/azure-app-registration-causing-the-following-error.html
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.
I'm setting a rest API to handle the authentication and the data for a react app, which will be a single page app with the ability to login using a google account. My question is if it possible to make the verifying process (using OAuth 2.0 in the backend) without leaving the react app, I saw that TikTok is simply opening a new window to choose a Google account. Is there a better solution? Is there something similar to the way we use Google maps API inside the web apps?
The window.open is the best bet. In many cases if you are working with identity providers window.open does not work, there you need a redirect to their website and back. Attempting anything else like an IFRAME equivalent is wasted effort :). Can you explain your use case further. Is yours a web app or device native app?
I'm having problems with accessing Express endpoints on Firebase hosting when using a Create React App production build.
The only change I made to firebase.json was switching from the default public folder to create-react-app/build.
When I go to example.com/test in browser, using Create React App in production, it just redirects me back to index, but using a separate REST client I'm still able to access that endpoint.
If I switch back to the default public folder in firebase.json and deploy to production, accessing this endpoint from the browser still works as well, but I no longer have Create React App of course.
What is happening here? Any help is appreciated.
UPDATE: It has something to do with service workers. I was able to find a temporary workaround by commenting out:
import registerServiceWorker from './registerServiceWorker';
and
registerServiceWorker();
from src/index.js.
Then I went to Chrome developer tools and "unregistered" the service worker from the Application menu.
Now I'm wondering how to correctly implement service workers.
It may be happen, because when you done firebase init, last question from console was something like - make a single page app (redirect all URL to index.html).
So what you can do, is to tun firebase init again, and select in this option NO.
And make deploy again.