Login using custom Authentication adapter

[mtchuenten]

Hello all,

I generated a new adapter using npm run make:auth and updated it with the content below:

/*
For more information about authentication adapters, visit:
- https://manual.os-js.org/v3/tutorial/auth/
- https://manual.os-js.org/v3/guide/auth/
- https://manual.os-js.org/v3/development/
*/
const myAdapter = (core, config) => ({
  async login(values) {
    // You can transform the form values from login here if you want
    const username = values.username;
    const password = values.password;
    console.log(values);

    if (!username || !password) {
      console.log("Please provide a username and a password.");
      return false;
    } else {
      fetch("https://jsonplaceholder.typicode.com/posts", {
        method: "POST",
        body: JSON.stringify({
          title: username,
          body: password,
          userId: 1,
        }),
        headers: {
          "Content-type": "application/json; charset=UTF-8",
        },
      })
        .then((response) => response.json())
        .then((json) => {
          console.log(json);
          return json;
        });
    }
  },

  async logout() {
    // And perform special operations on logout
    console.log("logout");
    return true;
  },

  async register(values) {
    throw new Error("Registration not available");
  },
});

export default myAdapter;

With this adapter, when a user clicks the submit button:

1. If no username or password was provided, then Please provide a username and a password gets printed to the console as expected, but the form also gets disabled, so that the user can't update his entries: they have to refresh the page. I removed the return false; statement, but that didn't change anything.
2. If a username and a password are provided, then the api call is made and a json object returned, but the form also gets disabled and the browser does not redirect to the OS.js home page, where the user has access to the menus to launch apps.

How do I then implement my custom login? What am I missing or doing wrong? The links provided for more details on how to do that as indicated in the file above are inaccessible:

• https://manual.os-js.org/v3/tutorial/auth/
• https://manual.os-js.org/v3/guide/auth/
• https://manual.os-js.org/v3/development/

[saoirse-iontach]

Cf. osjs-client/src/adapters/ui/login.js#150: create() :
ee.on('login:start', () => a.setLoading(true));
ee.on('login:stop', () => a.setLoading(false));
ee.on('login:error', err => a.setError(err));

Cf. osjs-client/src/auth.js#L216: login() :
return this.adapter.login(values)
.then(response => {...})
.catch(e => {...});
(BUG: resolve(false) doesn't trigger events)

Cf. osjs-srver/src/auth.js#126: login() :
const result = await this.adapter.login(req, res);
if (result) { res.status(200).json(profile) }
else { res.status(403).json({error}) }

So for your client adapter, try this:
async function login(values) {
if (success) { return profile }
else throw new Error('message')
}

[mtchuenten]

Thank you for the help @saoirse-iontach, I will definitely go through this in detail.

[andersevenrud]

Use exceptions in order to trigger an error in the process. Also, you need to resolve your promise in order for the UI to respond :)

async login(values) {
  // You can transform the form values from login here if you want
  const username = values.username;
  const password = values.password;
  console.log(values);

  if (!username || !password) {
    throw new Error("Please provide a username and a password.");
  }

  return fetch("https://jsonplaceholder.typicode.com/posts", {
    method: "POST",
    body: JSON.stringify({
      title: username,
      body: password,
      userId: 1,
    }),
    headers: {
      "Content-type": "application/json; charset=UTF-8",
    },
  })
    .then((response) => response.json())
    .then((json) => {
      console.log(json);
      return json;
    });
}

or:

async login(values) {
  // You can transform the form values from login here if you want
  const username = values.username;
  const password = values.password;
  console.log(values);

  if (!username || !password) {
    throw new Error("Please provide a username and a password.");
  }

  const response = await fetch("https://jsonplaceholder.typicode.com/posts", {
    method: "POST",
    body: JSON.stringify({
      title: username,
      body: password,
      userId: 1,
    }),
    headers: {
      "Content-type": "application/json; charset=UTF-8",
    },
  })

  const json = await response.json()
  console.log(json);
  return json;
}

[mtchuenten]

Oh my! I was pretty sure I was missing something. Thanks a lot @andersevenrud, this works like a charm.

[andersevenrud]

Would you mind opening an issue in https://github.com/os-js/osjs-cli about the broken links in the make command? I moved docs over to github hosting and that broke some redirects... and I seem to have missed a spot when I rewrote links 😅

[mtchuenten]

Done. Issue opened.