mardi 4 juillet 2023

How to properly restore a session on reload using ember simple auth custom authenticator's restore() function?

I have followed this YouTube tutorial on getting started with ember simple auth: https://www.youtube.com/watch?v=bSWN4_EbTPI&t=908s

I have everything working properly except for when refreshing the page. The custom authenticator I am using is supposed to use its restore() method on a refresh and grab the user token from the cookieStore, however when my code does this it gets the passed parameter, data which is an empty object upon console logging it. It's like it doesn't know to look in the cookieStore to fill out data with. I have tried messing with some settings in config/environment.js but can't find anywhere online with solid documentation on how to configure simple-auth. I am using v5.0.0

I can see the cookie being created when the app is loaded and filled out when I log in. For reference, here is what it looks like after logging in:

ember-simple-auth-session=%7B%22authenticated%22%3A%7B%22authenticator%22%3A%22authenticator%3Atoken%22%7D%2C%22token%22%3A%22secret%20token%22%7D

Here it is decoded:

{"authenticated":{"authenticator":"authenticator:token"},"token":"secret token"}

Here is my custom authenticator - app/authenticators/token.js

import Base from 'ember-simple-auth/authenticators/base';
import { inject as service } from '@ember/service';

export default class CustomAuthenticator extends Base {
  @service router;
  @service session;

  restore(data) {
    console.log('Restore');
    console.log(data);
    const { token } = data;

    if(token) {
      return data;
    }
    else {
      throw 'no valid session data';
    }
  }

  async authenticate(userData) {
    let response = await fetch('http://localhost:5000/users/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(userData),
    });

    if(response.ok) {
      response.json().then((data) => {
        const { token } = data;
        this.session.set('data.token',token);

        console.log(this.session);
        this.router.transitionTo('user', data.id);
      });
    } 
    else {
      let error = await response.text();
      throw new Error(error);
    }
  }

  invalidate() {
    return new Promise((resolve, reject) => {
      resolve();
    });
  }
}

And this is all I have in session-stores/application.js

import CookieStore from 'ember-simple-auth/session-stores/cookie';

export default class ApplicationSessionStore extends CookieStore {}

I'm trying to just extract the token field from the cookie which by my understanding should be getting passed into restore(data) but when I do console.log(data) I get {} which is just an empty object. If I try console.log(data.token) I get undefined. I've been stuck on this for a really long time now and I am sure it's something silly on my end. Any help is appreciated.




Aucun commentaire:

Enregistrer un commentaire