cozy.client.init() for client-side apps

[e-morel]

Hi,
I'm developing a client-side app for cozy V3 using cozy-client-js.

In the doc, cozy.client.init() use OAuth 2 but i have read in the Auth doc's, that for client-side apps cozy don't use OAuth 2 so I'm a bit lost.

In https://github.com/cozy/cozy-stack/blob/master/docs/client-app-dev.md cozy.init() only use the cozyURL and the token but how I can do it with cozy.client.init().

I don't know if I'm clear, but if someone can help me. Thank you in advance for your answers.

[y-lohse]

Hi,
I'm afraid that documentation bit you've linked to might be outdated, here's a newer one. Essentially, you need to do something like this:

cozy.client.init({
  cozyURL: '//' + app.dataset.cozyStack,
  token: app.dataset.token
})

You can find a real life example here.

Hope that helps!

Edit: we've updated the documentation :-)
Edit 2 : I initially forgot to prepend the cozyURL with //. Corrected in case someone stumbles upon this answer in the future.

[e-morel]

Thank you for your rapidity,

This works well apparently, but when I try to put or get docs in the DB
He said :
'Refused to connect to 'cozy.local:8080/status/' because it violates the following Content Security Policy directive'
It appear when (webpack:///./src/index.js) try to fetch cozy.local:8080/status/
But I didn't have a meta tag with Security directive.

Did you understand this issue ?

Sorry for wasting your time

[enguerran]

@e-morel I guess you serve your web app from another domain than the cozy back-end (aka cozy-stack).

cozy-client-js aims to be used on a server or in a same-domain web app.

[e-morel]

I serve my app through the script : cozy-app-dev.sh
He start for me the cozy-stack and create instances, so where is my mistake ?
The script doesn't serve the app on he cozy-stack ?

[enguerran]

And what's the domain you request to get your to your app? Is that cozy.local:8080?
I'll investigate a bit deeper.

[enguerran]

cozy.local:8080 was our old url for development purpose. Now we upgrade to use cozy.tools:8080 as you can see in the docs.

If you can check your code base and replace cozy.local to cozy.tools like this commit did f0bbf9b.

[e-morel]

I modified the host in the script to 'cozy.tools:8080'
But when I go to 'http://app.cozy.tools:8080'
He return me this :
{"errors":[{"status":"401","title":"unauthorized","detail":"You are not a server admin.","source":{}}]}

[e-morel]

With couchdb in "admin party" mode it seems work.
Thank both of you for your time.

[e-morel]

That was a trap, unfortunately when I try to define an Index,
The error come again :
index.js:230 Refused to connect to 'cozy.tools:8080/status/' because it violates the following Content Security Policy directive: "default-src 'self' cozy.tools:8080". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

[y-lohse]

Just to be sure: when you get this error, your browser is pointing to http://app.cozy.tools:8080/, correct?

CSPs are added by the stack when the page is served, but they shouldn't prevent you from making calls to cozy.tools:8080. If this is the repo for the app you're making, maybe you could update it with your latest tries so we can try to reproduce the problem (there might be an initilisation step missing somewhere?)

[e-morel]

Yes, exactly http://app.cozy.tools:8080/
I will update the repo.

[e-morel]

My problem is maybe caused by couchDB
When I create the instance, this database is created cozy-tools-8080/io-cozy-apps and 5 others for permissions etc..

But in Fauxton, I got this error This database failed to load.
Apparently caused by the / in the db name.

And finally I would like to know, if I put a document in the db with my own docType, where did this document will go ? In which database ?

Thank you

[clochix]

Hello @e-morel,

Regarding the This database failed to load, it's a known bug of Fauxton, that doesn't like / in database name. @jinroh fixed it a few months ago, and the fix should be available in Fauxton 1.1.10.

There one database per doctype, so if you create a doctype mydoc.emorel.org on server emorel.cozy.tools, documents will be stored in database emorel.cozy.tools/org.emorel.mydoc (replace / by %2F in URL to access it in Fauxton).

[e-morel]

Thank you this part is really more clear now.

About this issue :
Refused to connect to 'cozy.tools:8080/status/' because it violates the following Content Security Policy directive: "default-src 'self' cozy.tools:8080". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

Any idea ?
I tried to create an instance with cozy-stack instances add -appdir + mon app
and with the cozy-app-dev.sh script
but same problem.

If this is caused by my app, I don't know how because I did the more simple app I can do, to avoid problems.

I put the link to the repo in case of someone find something strange.
https://github.com/e-morel/cozy-app

PS : I'm novice with Cozy, you will probably find mistakes, sorry for that

[clochix]

Hello @e-morel,

Wasn't easy, but I found it, at last: when initializing the library, you have to pass it the url sheme. So, use cozy.client.init({ cozyURL: '//' + app.dataset.cozyStack, token: app.dataset.token}) (the // where missing).

[clochix]

Hello @e-morel,

Did the fix of the URL sheme worked?

[e-morel]

Hello,
yes it's fine now, I have made progress.
I have tried to insert the Cozy bar to the app :
cozy.bar.init({ appName: app.dataset.appName, lang: app.dataset.locale })
Content Security Policy: The page’s settings blocked the loading of a resource at http://undefined/settings/disk-usage (“default-src http://app.cozy.tools:8080 http://cozy.tools:8080”). Content Security Policy: The page’s settings blocked the loading of a resource at http://undefined/apps/ (“default-src http://app.cozy.tools:8080 http://cozy.tools:8080”).
It's a similar error, but I don't give URL to the bar, so i think it's a different issue. Not critical for now.

[clochix]

To get the URL of your server, cozy-bar uses by convention the data-cozy-domain attribute of the HTML element with role="application". Looks like you named this attribute data-cozy-stack. Renaming it should fix this issue.

[e-morel]

I will try this, thanks again !

[e-morel]

Errors are disappeared, but the request to get apps GET http://cozy.tools:8080/apps/ return a 400 bad request error.
If you have the solution, Thanks

[clochix]

Could you show us your code? How do you call this API? Are you sending the Authorization header?

[e-morel]

It seems to be a problem with the Authorization header, you're probably right.

To be more specific, the request return Invalid JWT Token

[clochix]

Your code should look something like this:

  const app = document.querySelector('[data-cozy-token]');
  fetch(`//${app.dataset.cozyDomain}/apps`,
  {
    method: 'GET',
    headers: {
      Authorization: `Bearer ${app.dataset.cozyToken}`
    },
    credentials: 'include' 
  })
  .then(function (response) {
    if (response.ok) {
      response.json().then((result) => {
        console.log(result);
      });
    } else {
      throw new Error('Network response was not ok.');
    }
  })
  .catch(function (error) {
    console.log('There has been a problem with your fetch operation: ' + error.message);
  });

[e-morel]

If I do the request by myself like with your code, she return me Not Found,
And when the cozy-bar did the request, she return Invalid JWT Token

I don't know if I'm clear.

[clochix]

I think I get it. cozy-bar get the token by itself in your index page, and assume the attribute is named data-cozy-token. Looks like you named it data-token, so cozy-bar is unable to get the token. Just rename it to data-cozy-token and it should work fine.
I created an issue to display a warning if cozy-bar is unable to get a valid token.

Thanks for your feedback, this really help us improve our tools.

[e-morel]

Yes it works, thanks

My two problems was caused by data-cozy-stack and data-token, I copied that from https://github.com/cozy/cozy-stack/blob/master/docs/client-app-dev.md, this doc need probably a little rework.

Thank you for your quick support

[nono]

Thanks! I've updated this doc