Tips on implementing the "remember me" feature using the Amplify Auth Class:

I'm in the process of developing a unique authentication component for an application utilizing Vue and AWS Amplify. One feature I'm looking to implement is a checkbox that allows users to remember their device upon login, eliminating the need for them to enter an mfa code every time they log in successfully. After reviewing the Auth Class documentation, it doesn't appear to have a built-in option for "remember me" or "remember this device."

Is there a way to maintain a user's session so that they can bypass mfa on the same device after initially logging in?

In addition, my Cognito user pool has been configured to support device memory for users who opt in, as well as disabling mfa if desired. However, I haven't found any current methods within the system to enable this functionality...

Answer №1

After exploring the topic extensively, I found valuable insights and discussions on this matter at: https://github.com/aws-amplify/amplify-js/issues/2552

If you are looking to incorporate a "remember me" feature with Amplify, there is a straightforward method available that aligns with your inquiry. It's worth noting that the approach I suggest involves using localStorage instead of sessionStorage, a practice cautioned against by OWASP (as seen in these conversations: Can local storage ever be considered secure?, and highlighted here: ).

This solution serves as an efficient option for testing purposes and quickly implementing functionality (although remember to enhance security measures before deployment -- famous last words, right? haha).

Below are the steps:

  1. Begin by crafting an awsConfig object encompassing all desired configurations, following guidelines documented in amplify docs:
// awsConfig.tsx module:
const awsConfig = {
    // REQUIRED only for Federated Authentication - Amazon Cognito Identity Pool ID
    identityPoolId: 'XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab',
    
    // REQUIRED - Amazon Cognito Region
    region: 'XX-XXXX-X',
    
    //...etc...

    //storage: window.sessionStorage OR .localStorage <--- LEAVE THIS OUT OF THIS CONFIG
}

export default awsConfig

  1. Navigate to your App.tsx or App.js file, and within the App function structure, invoke Auth.configure() while passing in the awsConfig object from step #1 above:
// App.tsx module:
import { Auth } from '@aws-amplify/auth'
import awsConfig from './awsConfig'

//...etc...

const App: React.FC = () => {
  Auth.configure(awsConfig)

//...etc...


  1. Incorporate a check within your Login component to determine if the "remember me" checkbox has been selected, then update the call to the Auth.configure() function accordingly by specifying the preferred storage parameter:
//Login.tsx module
import { Auth } from '@aws-amplify/auth'
import awsConfig from './awsConfig'
//...etc...

rememberLogin
     ? Auth.configure({ ...awsConfig, storage: localStorage })
     : Auth.configure({ ...awsConfig, storage: sessionStorage });

//...etc...

try {
     const awsUser = await Auth.signIn(username, password);

//...etc...

  1. No further steps are required after step #3... that concludes the process...

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

Is there a feature similar to Nuxt.js' auto-register in Next.js?

My Journey as a Beginner Being a beginner in the tech world, specifically in full-stack development (although I'm about 8 years behind), I find myself grappling with the decision of what to focus on learning. Vue and Nuxt.js are fantastic technologi ...

Develop a web application in ASP.NET MVC 4 utilizing bundle configurations

At my workplace, we have an ASP.NET WebApp that utilizes ASP.NET MVC Bundles. To give you a clear picture, here is a snippet of the code: public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle("~/bundles/jquery ...

What causes the v-for in a template to only update when the input text changes?

I'm currently working on a Vue.js code, but I'm facing an issue where the template isn't updating when new data is added to the input text. My goal is for the list to update when the @click event occurs. Visit this link for reference metho ...

Creating a fresh dataset using a 2D array in node-gdal-async

I'm facing a challenge in JavaScript where I need to create a new dataset from a 2D array. Despite my efforts, I can't seem to figure out the necessary steps from the documentation. It seems that in order to create this new dataset, I must utili ...

Developing interactive checkboxes for individual rows through React.js

Within a form, I have rows containing two inputs each. Upon clicking "add", a new row is created. For the second row onwards, by clicking "add" a checkbox labeled 1 should be added to indicate dependency on the previous row. In addition, for the third row, ...

Transmit an Array using Ajax and retrieve it on an ASP Classic page

I am facing a challenge where I need to pass an array using AJAX on an ASP page. After trying to send it as GET method and checking the data being received, I noticed that only the LAST record of the array is being processed by ASP. How can I successfu ...

Converting live CSV data into an HTML Table

Can anyone provide a simple example of how to fetch a CSV file from a public URL using JavaScript or jQuery and display the contents in an HTML table? I want the script to automatically update whenever the CSV file is updated, such as with Google Sheets. I ...

Is there a way to retrieve the id attribute of an option element from the source component?

When a user makes a selection, I am trying to access the id attribute of the HTMLOptionElement. However, it always returns 0 instead of the actual id I passed (such as 1 or 2) from the select tag: <div class="col-8"> <select (cha ...

How to center a big Popover using Twitter Bootstrap for maximum screen coverage

Imagine having a Bootstrap Popover on your website set up like this: HTML: <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content= ...

Pass information to a JavaScript file without resorting to global variables

I am looking for a way to transfer information from an HTML page to a script file that is contained within the same page. My initial thought was to use a global variable defined in the page and then accessed in the script file. However, I understand that ...

Nuxt experiencing a hiccup while running the generation script

Whenever I attempt to execute the generate script in Nuxt, my node process gets stuck. Nuxt successfully goes through the generation step, but then it hangs with the console displaying "Generate errors summary" and no further progress. nuxt:render Render ...

Storing a collection of strings in a mongoose schema: A step-by-step guide

I am working with a user schema that looks like this: const UserSchema = mongoose.Schema({ username: { type: String, required: false }, social: [{ facebook: { type: String, required: false ...

Unable to display value in Vue.js, however, the console log functions properly

As I embark on my journey with VueJS, I must admit that it is an amazing framework. However, I have encountered some issues with the Vue-Resource implementation, as it only seems to work properly half the time. When attempting to retrieve data from my ser ...

Strangely compressed HTML image

I am facing an issue with using a base64-encoded png retrieved from a server in WebGL. To incorporate the encoded png, I load it into an html Image object. For my specific needs, it is crucial that the png data remains completely lossless, however, I&apos ...

What is the best way to design a webpage that adapts to different screen heights instead of widths?

I'm in the process of designing a basic webpage for a game that will be embedded using an iframe. The game and text should always adjust to fit the height of your screen, so when the window is small, only the game is displayed. The game will be e ...

Exploring the Depths of Scope Hierarchy in AngularJS

Upon inspecting the _proto__ property of an object I created, it is evident that it has been inherited from Object. https://i.stack.imgur.com/hcEhs.png Further exploration reveals that when a new object is created and inherits the obj object, the inherit ...

What is the best way to send an array from a JavaScript function on a JSP page to the controller class?

After implementing a JavaScript button action to push all checked elements on a jsp page into an array, the next step is passing this array to the controller class for further manipulation. Specifically, I need to be able to delete elements from that array ...

How do I go about utilizing or bringing in those constants within the Drawerr.js module?

Currently, working with Next.js, I have defined some constants in the Nav.js file: export default function NestedList() { const [value,setValue]=React.useState(); const theme=useTheme(); const isMatch=useMediaQuery(theme.breakpoints.down('lg&apo ...

Having trouble with installing node-sass on a Windows system

Having trouble installing node-sass even though I have both Python 3 and 2.7 installed, along with the Visual Studio build tools. Node gyp continues to fail despite attempts to uninstall and rebuild node-sass. How can I resolve this issue? Below is the com ...

Posting a string using AJAX to the Java backend through JavaScript

I'm currently working on a comment section for a Web Client. There are two tables involved - one for the comments and another for the users. My goal is to send input data from HTML <input> tags to a Java Service where the data will be processed ...