aws-amplify / amplify-js

A declarative JavaScript library for application development using cloud services.
https://docs.amplify.aws/lib/q/platform/js
Apache License 2.0
9.45k stars 2.13k forks source link

'Remember Me' option when user log in #12880

Open aman9980 opened 10 months ago

aman9980 commented 10 months ago

Is this related to a new or existing framework?

No response

Is this related to a new or existing API?

Authentication

Is this related to another service?

Cognito

Describe the feature you'd like to request

In amplify, Auth service(cognito) is the default session storage for Amplify in local Storage and it's valid until the refresh token expires, which by default is 30 days.

======= Issue:

However, if user want to login on public/shared computer where they don't want to directly save the the information in local Storage instead they should be given an option to save like when Remember Me is selected it will be saved over local Storage. As amplify, uses Cognito for authentication. So, amplify should directly provide functionality to give Remember me option when user log in.

Describe the solution you'd like

NA

Describe alternatives you've considered

In order to achieve this, you have to implement your own solution via code to achieve the functionality of a "Remember Me " option in your application.

Additional context

No response

Is this something that you'd be interested in working on?

nadetastic commented 10 months ago

Related to https://github.com/aws-amplify/amplify-js/issues/3670

nadetastic commented 10 months ago

Hi @aman9980 thank you for opening this issue. I'll mark it as a feature request and discuss it with the team, however, I'd like to provide some solution that you may be able to implement. The library allows you to configure the token management process from the default localStorage. So in a case like this, you should be able to implement this by modify it to use Browser Session Storage as shown in the documentation above, which will clear the tokens when a tab is closed, and forget the user.

I'll further discuss the feature request of providing this functionality from the library but in the meantime, let me know if the above is something that can work for you or if you have additional questions.

israx commented 10 months ago

hello @aman9980 , you could implement your own Remember Me option with Amplify. It would look something like this:

// utils.ts

import { Amplify } from "aws-amplify";
import { sessionStorage, defaultStorage } from "aws-amplify/utils";
import { cognitoUserPoolsTokenProvider } from "aws-amplify/auth/cognito";

export function setRememberMe(check: boolean) {
  localStorage.setItem("remember-me", JSON.stringify(check));
}

function isRememberMe(): boolean {
  return JSON.parse(localStorage.getItem("remember-me") || "false");
}

export function configAmplify() {
  Amplify.configure([your-amplify-config-here]);
  // if the user wants to be remembered set token storage to localStorage
  if (isRememberMe()) {
   return  cognitoUserPoolsTokenProvider.setKeyValueStorage(defaultStorage);
  }
  cognitoUserPoolsTokenProvider.setKeyValueStorage(sessionStorage);
}

// App.tsx

import { configAmplify } from "utils.ts";
configAmplify();

export function App(){}

// RememberMeToggleComponent.tsx

import { configAmplify, setRememberMe } from "utils.ts";
function RememberMeToggleComponent() {
const [toggle, setToggle] = useState(false)
  function handleRememberMeToggle() {
    setRememberMe(toggle);
    configAmplify();
  }
}
israx commented 10 months ago

@aman9980 updated code above as it was not setting the storage mechanism to LocalStorage once remembered

dvelasquezTC commented 6 months ago

@israx Reloading the page causes it to loss the session. Is there a way to keep it on page reload?

israx commented 6 months ago

Hello @dvelasquezTC . What storage mechanism are you using to store tokens ?

dvelasquezTC commented 6 months ago

@israx it was an error in my code.

My configureAmplify is shared by a web app and a mobile app. I had a check that prevented configureAmplify from using sessionStorage in App.tsx, so when rememberMe was false, the session was saved correctly. However, when I reloaded the page, the configureAmplify in my App.tsx couldn't retrieve it due to the incorrect check I was doing, so it defaulted to using localStorage and couldn't find any session.

Thanks for your support