As the title suggests, how to manage the user state in Firebase authentication within an SSR Nuxt.js application? The following conditions should be met after a successful login:
Users should be able to visit protected resources when navigating
between pages
Users should be able to reload browser and still be signed into the
application. They shouldn't be redirected to the login screen
Firebase's default behaviour is to persist the user's session
even after the user closes the browser. Users should not have to
login to the application again if they close their browser and reopen
it and when there is still a valid Firebase user available
I was able to solve this problem by using the following:
Express server - using axios posts to manage the login on receiving
the request save the user ID in the session and save the access token
in a cookie
Vuex - store user state so easily accessible within my Nuxt application
Nuxt server middleware - used to check the authentication status of
the user on the server. Looking for user ID in the session or the
access token in a cookie that would have been created on login
Access to the code containing a working, running example of this scenario can be found in this GitHub repository.
I have also written a more detailed blog entry regarding all the important files used in the project.
Related
I'm currently blackbox testing a React SPA (the login page is located at the root of the url, e.g. https://myapp.com). The Webapp authenticates with Firebase and the session token is stored in the Indexed DB of the application.
The React app routes the request based to the authenticated section based on whether the session token is present in this part of the storage or not.
Now I try to scan the authenticated section of the Webapp.
I've tried creating multiple authentication scripts for this problem. My first approach was to record a ZEST script. While it recorded the post requests to get the tokens just fine, I still couldn't scan the authenticated part.
Then I found this google forum where a user had a similar problem. I created a new login script which entered the login details and clicked the login button as described. While testing, I correctly launched a browser, logged in and got redirected to the correct page. When trying to use this method with an ajax spider, for every crawled URL a browser was launched, which logged in correctly, but in the background the spider still only crawled the non authenticated website and didn't use the authenticated site that was presented after the script has run.
As far as I understood I would need to extract the session token and then I can include this token in all my authenticated http requests. Unfortunately I still cannot access the restricted part of the webapp, as the ajax spider does not know that it has to put the session token in the local storage of the app.
How can I achieve this or is it somehow possible to spawn a browser which logs in with the script and then uses this spawned browser to continue with an ajax spider?
I have a React Native app that uses Okta's hosted login page to authenticate.
When a user successfully authenticates for the first time through the PKCE flow, on every other login afterwards, they get automatically logged in as the same user.
I've used additionalParameters: { prompt: 'login' }, but it only asks for you to re enter your password and if you click signout, it brings you to a Citrix page that doesn't change anything about the flow - they still get logged back in as the same user after the fact.
I've tried using both the revoke and logout endpoints which actually changes the cookies a bit, but doesn't affect the flow same goes with restarting the app.
The only way is to clear hardware settings in xcode.
This may not even be an Okta specific issue, perhaps a general OIDC issue.
How does the hosted login page store and know you've previously logged in and how can that be fixed?
I am developing an hybrid mobile application using ibm mobilefirst platform.
I am using the custom authentication module example to implement the login module. The problem here is when the user closes the application the app gets logged out.
Is there anyway that I can implement so that the user will not be logged out unless they opt to click on logout button. In simple I am trying to achieve something similar to Facebook remember me option.
You could do something like this (very rough idea):
As part of your authentication flow, if the user has passed the authentication - store in either localStorange or JSONStore a "token" that will basically state that the user has previously logged in. Also save in the server's database using userPrefs something to validate the token.
Whenever the app launches, it will attempt to connect to the server. The environment will be protected with a securityTest so that the server will present a challenge - if a token exist it will attempt to verify it, if there is no token, a login form will display instead.
Assuming this is a first-time launch, if the login passed successfully then store a token in the device and store in the database its "public key"
The next time the app is launched the challenge will be presented again but this time, since we have a token - it will attempt to verify it. If verified - don't present the login screen, skip the rest of the authentication flow and display the secure content
Something like that...
Perhaps to create a 'better' user experience, on app launch also extend the splash screen duration while you're checking for the token, This can be done using this API method.
On logout, clear the token from the device and server.
While implementing the Facebook Connect to a web application , its possible to show Facebook Sign up page in a pop up and once logging in and Granting permissions are complete, its possible to Authenticate Again in PHP and to get the necessary details of the user, - id, email etc.
I believe, thats secure because, the User Insertion is not based on the Ajax Request Parameters.
Is it possible to do the same with Google Plus Login also ?
Means - Logging in to Google - Using Javascript SDK, asking permissions, Authenticating all done in a Pop Up Window. and then, Creating a new user with the Help of google-api-php-client ??
Yes, what you're trying to do is outlined with https://developers.google.com/+/web/signin/server-side-flow which includes some PHP code samples to help you do this. In general, the steps at authentication time are:
User clicks the "Sign in with Google" button which may pop-up a new window at Google prompting them to log in and authorize your webapp.
After they do so, a one-time code is sent to a JavaScript callback you specify.
Your Javascript method sends this code to your PHP server.
Your PHP server uses the client library to contact Google's server and exchange this one-time code for an access token and refresh token, which you keep and use to perform actions on the user's behalf.
I am building an app with the functionality to publish
messages to users walls while specific actions runs on
my website.
What I have done is (briefly):
Registered my own app on Facebook
Added a login button on my website with permission
to publish:
Log in on Facebook
Downloaded facebook-php-sdk library
It is now I start having problems. I do not know how
to do what I want to do now.
What I want to do:
When a user logs on to facebook via my website. I want
a file on my site to be called, where I can update the
user's data in my own database as well.
Because that is not what the canvas url is meant to do? How it
is no, seems no file at all is called on my site when
I click on Login.
Since you are using the Facebook PHP-SDK you noticed that there are two options for the users to login:
Using the XFBML button, which will:
Open a login dialog (pop-up) asking for permissions..etc
When a successful authentication/authorization is complete the dialog will close, the auth.login event will be triggered and based on that the page will get reloaded window.location.reload();
The PHP in the top of the page will get into business and $session = $facebook->getSession(); will actually retrieve a session! $user = $facebook->getUser(); will retrieve the current user
Using the Login URL generated by the Library $loginUrl = $facebook->getLoginUrl(); this URL will get you through the same flow and if you noticed there's a next redirect_uri parameter which will redirect you back after a successful process to that URL (mainly the same URL you are at), where you can change that parameter if you like.
The canvas URL is the URL Facebook uses when it displays your application from within Facebook. You would use this functionality if you expect users to use your application while in Facebook itself.
When authenticating using Facebook's API (assuming graph API usage here), you provide a redirect_uri as part of the authentication URL. Once Facebook has authorized your application, it will redirect the user's web browser to the URI you specified. This URI can be any link you desire on your site. You should use the link as the determination of when the user is logged in successfully, e.g., https://mywebsite/facebook/loggedin.