Hello Stackoverflow Community!
I have a pretty simple question that I am pretty sure there is an answer for!
I want to create a simple sign in system for a website, however, I am wondering whether or not I can login, and then carry over the fact that it is logged in to other pages on the site. Because once a user is logged into the site using signInWithEmailAndPassword(), and I want make sure they can navigate the full website and all of it's seperate html file pages, and stay signed in.
Can anyone please help me?
Thanks,
Noah
Firebase Authentication is persisted between page loads. But instead of calling signInWithEmailAndPassword() on each page, you should monitor onAuthStateChanged() and then only call sign-in when there is no current user.
Related
Folks,
We are in a unique situation here. Our React site integrates with Signicat for identity solution. Most of our user base comes from Facebook i.e. they use the Facebook app, look at our posts and click on links we post which redirect to certain sections in our website which require identification.
So an example link posted on Facebook group https://example.com/en/startpage-in-english/ is converted into https://l.facebook.com/l.php?u=https%3A%2F%2Fexample.com%2Fen%2Fstartpage-in-english%2F%3Ffbclid%3DIwAR3loYqYOvom5k8_mOww89p5tun5H9HqIIKE1ebwwCcB3PD4jzxpTVyZGCk&h=AT1E3p1ejYWH9l2KhUo8D_RVjl_EzKBat4woeMHgRv7yXpT9Y-EZoBcK26sQtjjBBwAQt7Pt83a-i_k5JCGuvOBWfgB9pZ7Uv8LnDlyphNKc1Og0nl6QIqWd_nFEAva3OWN-PZ3byqsU7K0I5A&__tn__=-UK-R&c[0]=AT0-5n51iPMlSYghORXW8qxYXJQEejQTAhfiDQ3P3DK_ZTZM3GWbN4zXYKf-nyD_hWJdxQccenDp-5VgphfWuD6ZQ0ikeXq4lv4bjLbSJVFP9k4IxeMBT5mDa9jNdYnYlNs-DkXOM-LiPhhl-Obra9CAbtvihe-G7-8. When users click on the link, Facebook by default opens the link in its own Facebook browser. The subsequent steps in our portal need the user to identify himself and when the identification is completed and in the final step the request to Signicat hangs forever.
We identified that this issue is only happening with Facebook browser and hence one of the workarounds was to Open the default browser with the link to our website.
Note that:
a. this is not a React-Native app, our website is built using plain React hence the WebView solution does not work.
b. Facebook browser suppresses "window.open" with "newwindow" call and simply displays the site in the same Facebook browser instance.
So bottom line is, we need a way to Open the default OS Browser from Facebook App/Browser with the link to our site. Hope somebody can help!
Thanks in advance...
SG
I am developing an app with ReactJs, the basic is done but now I have a problem. My app consists of 2 screens, one is called Login and the other is called Home. It's sort of a minigame linked to other pages. So if I have logged in on other pages, and then supposedly I click a button to redirect to my app, I want it to check the authentication before rendering, if the user is valid then it goes straight to Home, if not then the Login is required. Due to security reasons, I can't share any code, I just want to know what's the approach to this situation. Many thanks.
Respected Developers
I have an issue in web hosting. First of all, I would like to sorry you in advance as you may not be able to understand well because of my inexperienced English.
I have already prepared built react app and landing page of WordPress.
What I want to do is when I type in the browser just like https://myapp.com, it goes to my WordPress landing page, then that landing page will have some links to the react app.
So, WordPress page is only for the first encounter of my site, and all the contents will be shown by react.
Godaddy domain name has already been bought.
All left is to host 2 different apps to one domain. How can I do it without fail?
Could you please tell me how to do it? I will be happy if someone helps me with the good opinion.
Thanks in advance.
I'm new to the react web app, I trying to create cart payment checkout process. All the modules PayPal button open in same page with POPUP. I want to redirect from my site to the PayPal site and return back to my site. Currently i'm using the below example. Is there any module to create order and redirect.
https://www.npmjs.com/package/react-paypal-button-v2
Why do you want to redirect away from your site? That's how things were done 5+ years ago.
It's much better to keep your site loaded and present in the background and show payers an in-context approval experience, instead of redirecting them over to a new and possibly unfamiliar login page.
You are asking for how to do something you shouldn't even be trying to do, and which will result in an inferior buyer experience and fewer completed checkouts, which is the opposite of what you should want.
But since you ask, the way to do it is not not use the PayPal JavaScript SDK button. Just use the /v2/checkout/orders REST API to create an order and receive an approval_url, which you can redirect to with a static "Checkout with PayPal" button from, say, https://www.paypal.com/us/webapps/mpp/logos-buttons
Again, full page redirects are an old integration method that give a poor buyer experience and you shouldn't use this method.
I'm implementing an application using the full MEAN stack.
I created a login page to signup with facebook to be able to show a profile page. But I discovered some problems. For this reason, I created a smaller version of my webapp, maintaining the same project structure.
The complete code, executable (only replacing "client id" and "secret") with "npm install" and after "nodemon" is available here: https://github.com/Ks89/MEAN-OAuth_Example
If I'll call (with a browser) the rest API that I created to login with facebook at "http://localhost:3000/api/auth/facebook", everything will be ok!
But if I'll want to do the same thing, clicking on the "Login" button, I'll receive the error as in figure:
I know that the problem is related to CORS, but how can I'll fix this in my application, maintaining the same project structure?
I don't want to put the "rest path" inside the HTML. I tried for many days different solutions without success.
If you want, experiment directly on my application that I created exactly to write this question ;).
If really necessary, I'll able to post the entire source code here, but I prefer an organized and executable code into a repository for this particular question.
Please, give me some ideas and hopefully a solution, because I'm really blocked.
The example routes from the passport-facebook repo are intended for multipage apps, not ajax requests. If you look at what those routes are doing, /auth/facebook is just a redirect to Facebook where the user is expected to log in if necessary and authorize your application. When you make that same request from angular, it follows the redirect and tries to load the Facebook page, but the browser blocks you as your console screenshot shows. CORS would be relevant if Facebook wanted to allow you to request their login form across origins, but they don't because that would basically make you a phisher.
It looks like you're trying to handle authentication without leaving the page, but at some point you're going to need the user to leave your site and be redirected to Facebook in order to complete the OAuth flow. You can either open a pop-up containing the Facebook OAuth dialog (it looks like this is what the Facebook JavaScript SDK does by default) or just use your app's current tab with something as simple as <a ng-href="{{facebookOauthUrl}}">Log in with Facebook</a>.