0

I'm making a simple login signup form with remember me functionality in react js along with redux, thunk and redux-persist. When I send correct login details i.e. email and password the api returns a non changing (permanent) access_token.

Expected Functionality:- if remember me is ticked the access token should always be saved so that when ever I revisit the page after closing the browser or when I refresh the page I should be automatically logged in to home page

if remember me is not ticked the access token is stored only till I don't exit the page or I don't close the browser, once browser is closed the access_token is automatically deleted

my approach is:

if - remember me button is ticked then I want to persist the access token (received from api) in local storage

and if- remember me button is not ticked then I want to store the access token in session storage

can someone help me to implement this or correct my approach if it is wrong.

https://github.com/guneethind/login-signup

Login.js

>  const Login = () => {
>  const dispatch = useDispatch();
>  const navigate = useNavigate();
>
>  const data = useSelector((state) => state.login);
>
>  const onFinish = (values) => {
>    dispatch(setLoginValues(values));
>  };
>
>  useEffect(() => {
>    if (data?.loginSuccess?.access_token) {
>      message.success("Logged in");
>      navigate("/home");
>    } else if (data?.loginFailed?.status === 401) {
>      message.error(`${data.loginFailed.message}`);
>      navigate("/login");
>      dispatch(setLoginEmpty());
>    }
>  }, [data]);

store.js

import storage from "redux-persist/lib/storage";


const persistConsif = {
  key: "root",
  storage: storage,
};

const persistedReducer = persistReducer(persistConsif, reducers);

export const store = createStore(
  persistedReducer,
  composeWithDevTools(applyMiddleware(thunk))
);

export const persistor = persistStore(store);

index.js

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,
  document.getElementById("root")
);
Guneet Thind
  • 41
  • 1
  • 6
  • Could you provide all the things you have tried till now? We can then look at that and suggest you changes, if needed. – Anindya Dey Apr 21 '22 at 05:54
  • Stack Overflow is not a code writing service. You write the code, and if it doesn't work, post it here and we'll help you debug it. – Brett Donald Apr 21 '22 at 06:05
  • @AnindyaDey I have added my code – Guneet Thind Apr 21 '22 at 06:16
  • @BrettDonald I have added my code – Guneet Thind Apr 21 '22 at 06:17
  • So does it work? If not, what did you expect it to do, and what did you observe instead? Try to see the problem from our point of view. We know nothing about your project. You need to provide enough information about the problem for us to understand it, and you need to explain what you've attempted yourself in your efforts to solve it. – Brett Donald Apr 21 '22 at 06:22
  • See @BrettDonald I'm only able to implement the functionality when remember me is ticked using redux-persist i.e. the access_token is permanently saved in local storage. – Guneet Thind Apr 21 '22 at 06:29
  • I don't know how to implement the functionality for "when the remember me is unticked".... – Guneet Thind Apr 21 '22 at 06:30
  • I want help with how to implement the unticked functionality should I use session stored with redux-persist or should I use session cookies........... my problem is very much similar to this problem here https://stackoverflow.com/questions/56099291/how-to-persist-to-both-localstorage-and-sessionstorage-at-the-same-time-using-re?newreg=dad1492e882042a998b09a4e81dabbd0 – Guneet Thind Apr 21 '22 at 06:32
  • You could look at this https://stackoverflow.com/a/58032881/13584363. There's a "sessionStorage" (`redux-persist/lib/storage/session`) module which you might use. – Anindya Dey Apr 21 '22 at 07:59
  • For more info, look at the npm page of redux-persist - https://www.npmjs.com/package/redux-persist#storage-engines – Anindya Dey Apr 21 '22 at 08:03
  • Asking to help to implement is not appropriate here, I guess. Stackoverflow is not for writing code. – Alex Apr 21 '22 at 09:10

1 Answers1

2

Finally resolved the problem, I used cookies for when the remember me is unticked and local storage for when remember me is ticked

here's the code for the same https://github.com/guneethind/login-signup/tree/cookies-implementaion

Guneet Thind
  • 41
  • 1
  • 6