We Keep Coding

Angular/Ionic Singleton gets destroyed after refresh

i have a singleton typescript class that stores the Login Credentials of a user. I set them on the login Page and go to the next page with my Angular Router.navigate. (without params), on the next page i want to consume my singleton, and it works perfectly, but if Irefresh the page the singleton is undefined?
How can i solve this?
This is the error after refreshing:
core.js:5980 ERROR Error: Uncaught (in promise): TypeError: Cannot
read property 'socialSecurityNumber' of undefined TypeError: Cannot
read property 'socialSecurityNumber' of undefined
Thanks

If you refresh the page (F5 in the browser) the whole SPA gets bootstrapped again and services created again.
That means that the new instance of the service will not have the user data unless stored in the storage or cookies.
Also check that the service is provided "in root" and not in any module providers array, so there are no copies of it.

Mostly in this type of scenario's we will store the user login details in browser storages or cookies.
Try to user Browser storages to store the user related details when you are actually going to keep them in service class.
Have look at here to know about browser storages and how can you set them.
Implement-browser-storage-in-an-angular-application
After the above implementation, try to check the user credentials on app component loading, found go with regular flow if not redirect to login page.
P.S: You need some design changes for this to implement like you really want user to continue with current session or need him to redirect login page for new session.

Redirect to specific page after refreshing (oidc.js)

I am using .NET Core (+IdentityServer) backend along with the SPA React application.
Whenever I change the page inside my SPA application the url updates. (for example: / to /users).
The issue:
Whenever I refresh the page with F5 or want to go to the specific component connected to route using url only I get the following action inside my browser:
Basic state when pressing enter in the url: localhost:3000/users
After pressing enter: http://localhost:3000/signin-oidc#id_token=...
When the user is logged in the page redirects to the main url: localhost:3000/
So, basically I am always redirected from the current url to the main one.
How can I make the application redirect back to the localhost:3000/users on the refresh or url change using oidc-client in react?
What is the best practice to allow user to be able to refresh the page (or go to the specific url) keeping in mind that the user is already authorized?

If I understand you right and you are using the oidc-client-js library to implement Open Id Connect then my NodeJS Code Sample may be useful to you, and the Authenticator class in particular.
RESTORING THE PRE-REDIRECT LOCATION / DEEP LINKING
This is managed via code like this, which is also useful if the user has bookmarked a location within your app and needs to login first:
// Store the state when redirecting the page
await this._userManager.signinRedirect({
state: location.hash,
});
// Restore it afterwards - and remove tokens from the URL
const user = await this._userManager.signinRedirectCallback();
history.replaceState({}, document.title, user.state.hash);
RELOADING THE PAGE OR OPENING A NEW TAB
This is best managed via silent token renewal using the Authorization Server session cookie, so that there is no top level redirect.
await this._userManager.signinSilent();
RUNNING MY SAMPLE AGAINST YOUR SYSTEM
It may help you to have something to compare against, by running the sample against your own system, by changing the details in the SPA and API config files to point to Identity Server.

Detect previous path in react router if i came from an outside application?

I am using react router. I want to detect the previous page (outside app example: coming from gmail to my application) from where I am coming from. I have the router in my context. But, I don't see any properties like "previous path" or history on the router object. How do I do it?
example 2: user places an order we send them an email confirmation via email where onclick on view-order-details they are navigated back to our web app, now how to detect which link they came from?
Here's another context to understand better
I have to implement a back button in my web app, when user comes from email to my webapp he's navigated to https://example.com/orders/{orderID} directly and if i just use props.history.goBack it'll go back to email page. But i want to user to be navigated to https://example.com/dashboard.
Now you might say use props.history.push('/dashboard') this will become static value. if user is navigated internally(not coming from email or external page) from dashboard->all-orders->orders/{orderID} on click of back button should be navigated to dashboard->all-orders page and not to dashboard.

To read the history in React-Router use the history object that's passed along with the routeComponentProps or the useHistory hook.
But that won't give you what you're looking for either:
There is no way to read entries in the browser history. Browsers simply don't expose that to JS at the moment. See this entry on the history API on MDN
In order to detect which site a visitor came from you can check the referrer. document.referrer on MDN
Example for a button that goes back one step in history for internal referrers, but goes to the dashboard if the site was loaded from a bookmark or external link:
button.onclick - () => {
if (document.referrer && document.referrer.length > 0 && document.referrer.startsWith('https://yoursite.com')) {
// user came from an internal link
window.history.goBack(1);
}
else {
// user came from a bookmark or an external link
window.location = 'https://yoursite.com/dashboard';
}
};
The HTML5 history allows you to go back to an arbitrary point in history, but you can't know the details about that point in history. You can only go back to it by a numerical index.

Google Analytics on React JS site outputting incorrect data (broken sessions?)

We have a site with most of the content managed by Wordpress, however when the user navigates to search pages (user searches for a product), it's handled by React JS.
It's all on the same domain, so the user never knows that they are interfacing with two different applications.
Google Analytics on the site, however, doesn't seem to perceive sessions correctly. It's logging entrances (landing pages) to the site as search pages with rather long URLs:
There are thousands of landing pages like this, and the site is new, so there's no way this is all traffic is coming in from external links
Referrer path for all of these sessions is "(not set)"
Internal IP addresses are filtered
The traffic is coming from various sources/mediums, suggesting that sessions are somehow breaking (screenshot below)
Currently, GA is set up with GTM. I tried using this to fire the GTM tag in React.
Also attempted making the GA tag within GTM fire on browser history changes rather than page views (history changes fire when in React, normal page views in Wordpress). But the issue still persists with these modifications.
Note that these sessions are not specific to any one browser:

The issue you're experiencing comes from the fact upon search, you are switching your entry point and doing a hard refresh of your page to the React app. Even though the domain doesn't seem to change, it's still considered by the browser as a fresh page load and thus showing like so in your analytics, as shown by this request:
You haven't really told if you were using react-router in your app (I'm assuming you are given the different paths), a way to get around the problem would be to use react-ga instead of the default GA script and leverage the onUpdate callback of react-router.
First import and initialize the module with your GA id:
import ReactGA from 'react-ga'
ReactGA.initialize('UA-000000-01')
Then in your routes configuration, add the onUpdate property on the <Router> and create a method that will call the google analytics with only the pathname so you won't end up with all the query parameters that are quite obnoxious in the dashboard.
const onUpdate = () => {
ReactGA.set({ page: window.location.pathname })
ReactGA.pageview(window.location.pathname)
}
<Router onUpdate={onUpdate}>
...
</Router>
Still, if you want to keep track of the user search, I would recommend using events instead, and doing something like the following upon search:
ReactGA.event({
category: 'User',
action: 'Search',
value: 'your formatted search value'
})
It will also give you the ability to format the value of the search any way you want, which would be more readable for you than query parameters.

angular javascript cleaning URL

I have a SPA application developed using AngularJS. Access to the application can take place in two ways:
1) By entering the address (example) www.example.com, or
2) By clicking on a link like http://www.example.com?do=this&param=1234
When the application is started, it examines the URL and, if suitable parameters are found, it prompts the user to log-in/register and then goes to a specific page within the application where the visitor is supposed to perform some activities related to the action this with parameter 1234.
Traversal through pages is handled by the javascript command:
$window.location.href="#/other_page;.
This works ok so far, except that the URL is kept with the parameters. As such, whenever the application decides that it needs to go to another page, the URL (in the address bar of the browser) would look like:
http://www.example.com?do=this&param=1234#/other_page
which is messing the behavior of the application.
My question is: Once I was able to extract from the original URL the received parameters, I want to clean the url and proceed with its normal contents, which would be something like:
http://www.example.com#/other_page.
How can this be achieved?
Thanks in advance.

Using $location service clear the search query params from address bar of the browser.
Syntax is:
$location.search({});
For Example After finished your login or register page.
$scope.login = function(){
// Check your logic and clear search params
if($routeParams && $routeParams.src)
{
$location.search({});
$location.path($scope.baseurl+$routeParams.src);
}
};
Here am using $routeParams service you could also check $window.location.search

You can use $location service. It says:
Changes to the URL in the address bar are reflected into $location service and changes to $location are reflected into the browser address bar.
So, basically you can do:
$location.path('other_page')
which should clear the URL and set this path instead.

Just found a working solution. I use the following command:
$window.location.href = location.protocol +
"//" +
location.host +
"/index.html#/other_page" ;
which makes the trick. Perhaps not the most elegant, but it works as needed.
Thank you guys (#vivek and #prakashA) for your support.