How to use Amplify Auth Class to add "remember me" functionality?

Question

I am creating a custom auth component for an application using Vue and AWS Amplify. I am trying to create a checkbox to remember the device upon login, this would allow users to opt-in to not have to use the mfa code to log-in after successfully logging-in. Looking through the Auth Class docs, it does not seem to have a "remember me" or "remember this device" option included.

Is there a way to store a users session, so they do not use mfa on the device after that logging in or any other way?

Also, I have already configured my cognito user pool to be able to remember devices upon user's opt-in, as well as suppressing mfa if they choose to opt-in. It just seems like they do not have any current methods to run that option...

Answer 1

The below is all based on discussion about this issue here: https://github.com/aws-amplify/amplify-js/issues/2552

There is a way to easily add "remember me" functionality with Amplify, along the lines of what you ask in your question. However, keep in mind that my proposed method uses localStorage vs sessionStorage, which is discouraged by OWASP (discussed here: Can local storage ever be considered secure?, and documented here: https://cheatsheetseries.owasp.org/cheatsheets/Session_Management_Cheat_Sheet.html).

However, it's a simple solution for testing and getting something working quickly (just don't forget to secure it before going live -- famous last words hahaha).

Here are the steps:

1. Create an awsConfig object with all the configuration you want to set, like what's described in amplify docs: https://docs.amplify.aws/lib/auth/start/q/platform/js/#re-use-existing-authentication-resource

// 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

2. Go into your App.tsx or App.js, and inside the App function, call Auth.configure(), and pass the awsConfig object to it from #1 above:

// App.tsx module:
import { Auth } from '@aws-amplify/auth'
import awsConfig from './awsConfig'

//...etc...

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

//...etc...

3. Go into your Login component, and add a check for whether that "remember me" checkbox was ticked or not, and re-do the call to the Auth.configure() function, but this time also passing 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...

4. There is not step #4... that's it... you're done...