Should tabs be closed or redirected after successful authentication with Google?

I have a project that was developed using perl-dancer and angular. The project is integrated with Google as an openID system.

On some of the pages, there is an edit grid with a save button. To prevent loss of unsaved data when the session (created from perl-dancer) expires, I implemented an angular interceptor that detects 401 server errors and opens an angular modal displaying a "Google login" button (this occurs after the session expires).

To prevent potential loss of unsaved data, the Google form opens in a new tab instead of redirecting from the original page.

Upon successful Google authentication, the new tab redirects to the project homepage while the original tab remains open with the modal displaying the "Google login" button.

Users can close the new tab, and on the original window, they can close the modal and still find their unsaved data intact.

However, this solution - necessitated by the inability to embed the Google login form or a similar solution - is not ideal for user experience.

Anyone have suggestions or solutions to improve this process?

javascriptangularjsxmlhttprequestgoogle-authenticationdancer

Answer №1

To handle data being processed, consider incorporating a check for $state or another service within the interceptor. This way, you can set a flag in localStorage to indicate that the user is currently working on something.

Create a specific route dedicated to this scenario, where the user will be instructed to close the window and continue editing or saving within their current open window.

During app startup, there are various methods to verify the localStorage flag and redirect to the designated route accordingly.

In the controller of this route, clear the localStorage flag. You could even utilize localStorage events to automatically close the modal in the previous window.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Instructions for outputting a string to the console in Javascript

I am looking for a versatile method to write a string to standard output in a portable manner, without automatically adding newlines at the end. I prefer it to utilize UTF-8 encoding and be compatible with: jrunscript (from any JDK) Rhino node.js Curren ...

javascriptnode.jsrhinojava-8nashorn

The background image is not appearing on the div as expected

I've been attempting to create a div and set a background image for it using jQuery, but I seem to be facing issues. When I try setting the background color to white, it works fine. Here's the code snippet: function appendToDom(poster) { ...

javascriptjqueryhtmlcssnode.js

Verify MVC Controller Authorization and respond with 401 Unauthorized to the AngularJS application

Currently, I have an AngularJS application that interacts with an MVC Controller to retrieve specific data. To ensure that users have the necessary permissions to execute certain actions on the controller, I've created a custom class called RBACAutho ...

angularjsasp.net-mvc

I am unable to retrieve the values from a manually created JavaScript list using querySelectorAll()

const myList = document.createElement("div"); myList.setAttribute('id', 'name'); const list1 = document.createElement("ul"); const item1 = document.createElement("li"); let value1 = document.createTe ...

javascriptlisttypescriptnodes

Restricting character count when displaying output in JavaScript

Is there a way to restrict the number of characters displayed on a label using a JavaScript file? I am encountering an issue with a specific part of the code that is triggered by a button click and is responsible for printing the contents from a preview bo ...

javascripttextprintinglimit

How can I showcase a chosen name in a <p> tag using a Select dropdown, and then pass the selected ID to a controller in AngularJS

I am working with a select input in my HTML that is populated using ng-options. My goal is to display the selected NAME below, while sending the selected ID back to the controller. I am able to access the required id from ng-model="user.category". How ca ...

angularjsangular-ngmodelng-options

Real-time updates using Express.js and Redis

Looking for guidance on managing real-time changes from Redis in Express.js. I am in need of fresh data from Redis every time there is an update. Can someone provide a helpful example or solution for this? ...

javascriptexpress

react-widgets: deciding on the return value for the onSearch function in Multiselect

I'm currently experimenting with react-widgets and utilizing the onSearch function in conjunction with the Multiselect component. Even though I can see that onSearch is being called with the searchTerm, I am unable to incorporate the response into the ...

javascriptreactjs

Implementing the 'bootstrap tour' feature in a Ruby on Rails application

I have integrated bootstrap-tour.min.css and bootstrap-tour.min.js into my project. <script type="text/javascript" src='bootstrap-tour.min.js'></script> <link rel="stylesheet" type="text/css" href="bootstrap-tour.min.css"> Her ...

javascriptcssruby-on-railsrubytwitter-bootstrap

Verify the security of form authentication on the client-side

For my ASP.NET website, I am utilizing Form Authentication and need to verify the user's authentication status before initiating a callback on the client-side. What is the best way to accomplish this using JavaScript/jQuery? ...

javascriptjqueryasp.net

Leveraging $routeProvider alongside $stateProvider

Initially, I utilized $routeProvider in the following manner and it delivered the desired outcome. angular.module('angularProject', ['angularProject.filters', 'angularProject.services', 'angularProject.directives', ...

angularjsangular-ui-router

Allow-Origin-Control, handler.php for emails, and form validation script

I encountered a strange bug recently. There's been some issues with the HTML5 template I downloaded, specifically related to the contact form and MailHandler.php file. Despite having both files in the same directory, when inspecting element in Chrome, ...

javascriptphphtmlcontacts

Creating scalable React applications

Can you provide insights on the scalability of React Apps? What recommended approaches are typically employed to effectively handle and generate scalable states in web applications using Reactjs? * ...

javascriptreactjs

What is a more efficient method for identifying a single, specific object without using the index approach demonstrated here?

I need to verify if the taskDetails object contains only the lastTask value and no other values. To achieve this, I am currently using the approach with index [0] as shown below: Object.keys(this.clubdetails.taskDetails)[0]==["lastTask"] However, I have ...

javascriptvue.jsobjectfrontend

Enhance the functionality of NodeJS core applications

I recently attempted to modify some custom functions in the FS module of NodeJS, which is an integral part of NodeJS' core modules. The specific file I targeted was fs.js, located in /usr/lib/nodejs. However, despite making changes to the code, I noti ...

javascriptnode.js

What is the preset value for the payload in a vuex action?

Currently, I am utilizing an if-else statement in my Vuex action to set a default value for a payload property. Specifically, I check if the passed payload object contains a delay property; if it does not, I assign it a default value and handle appropriate ...

javascriptvue.js

Place the retrieved data from the API directly into the editor

I've integrated the LineControl Editor into my app and everything is functioning perfectly, except for when I attempt to insert text into the editor. Here's the link to the LineControl GitHub page: https://github.com/suyati/line-control/wiki Fo ...

javascriptjqueryangularjs

Trigger the onclick method by selecting an icon within the MUI DataGrid

Currently, I am utilizing the default MUI Dialog model in the "DialogModel.js" component. Additionally, I have integrated another MUI DataGrid component as shown below: // RulesTable.js import * as React from 'react'; import { DataGrid } from &a ...

javascriptreactjsmaterial-uimui-x-data-grid

Developing a trivia game using HTML and JavaScript

I'm in need of some serious assistance with creating a quiz using HTML. My goal is to have a web page where users can visit, take a quiz, and have their responses stored. Unfortunately, I don't have the knowledge or skills required to do this on ...

javascriptjqueryhtml

Ways to utilize $document within a Modal

I'm struggling to utilize the $document in the modals controller. Is there a proper way to pass it in? Just using document is not allowed according to our Angular project guidelines. How I call the modal: var modalInstance = $uibModal.open({ t ...

javascriptangularjs