Proposal for new example: react-auth-google

[oscar6echo]

I created a new example to manage authentication and picked Google as an example as it offers serveral userful backend services (sheets, drive) and their auth lib for SPA is self contained and well documented.

See PR 241

It comes with several questions:

1. Is it appropriate for the official jupyterlab/extension-examples repo ?

2. If not (and in general) how can I host a jupyterlab extension in its own repo (for example I plan to write a similar extension for a corporate auth) ? Can I just take folder "react-auth-google" in a separate repo ? Will the building & config work the same ? any subtle change to make ? It would be useful to explain how to to do that in a section of jupyterlab/extension-examples repo I think. See errors below.

3. The extension is designed primarily for JupyterLite: It writes data into the IndexedDB browser storage. It also works in JupyterLab of course, but the user workflow is a bit manual as they must copy the token (using a button in the extention scree) and paste it into a notebook variable to be able to use it. In JupyterLite it is simpler: any notebook can just read the IndexedDB - see demo notebook. Maybe this could be improved for non JupyterLite env: Is there a simple way to list all living kernels and write a variable into them from an extension ? I read the Kernel Messaging example but I could not find the code snippets I was looking for..

What do you think ? Any advice much appreciated.

EDIT:
re point 2/ I tested by moving the folder in another location and the pip install -e . failed with the following msg.

[olivier]jupyterlab-explo/oscar6echo-lab/sa-react-auth-google [📦 v0.1.0][ v18.16.1][🐍 v3.11.4][🅒 jupyterlab-extension-examples][⏱ 2s]
❯ pip install -e .                                   
Obtaining file:///home/olivier/GDrive/dev/jupyterlab-explo/oscar6echo-lab/sa-react-auth-google
  Installing build dependencies ... done
  Checking if build backend supports build_editable ... done
  Getting requirements to build editable ... done
  Installing backend dependencies ... done
  Preparing editable metadata (pyproject.toml) ... done
Building wheels for collected packages: jupyterlab_examples_react_auth_google
  Building editable for jupyterlab_examples_react_auth_google (pyproject.toml) ... done
  Created wheel for jupyterlab_examples_react_auth_google: filename=jupyterlab_examples_react_auth_google-0.1.0-py3-none-any.whl size=136803 sha256=280156e472c9f36790c147b39baf83d6067ba387df87cd4ef084b132c0b7068b
  Stored in directory: /tmp/pip-ephem-wheel-cache-wc0e3aru/wheels/44/2c/d4/6645e3815bb8d3fc94f7e40db55455c4dddaca334c8ac32ff2
Successfully built jupyterlab_examples_react_auth_google
Installing collected packages: jupyterlab_examples_react_auth_google
ERROR: Could not install packages due to an OSError: [Errno 2] No such file or directory: '/home/olivier/miniconda3/envs/jupyterlab-extension-examples/share/jupyter/labextensions/@jupyterlab-examples/react-auth-google/build_log.json'

Then I deleted the labextension folder in jupyterlab_examples_react_auth_google and reran. Other error...

[olivier]jupyterlab-explo/oscar6echo-lab/sa-react-auth-google [📦 v0.1.0][ ][🐍 v3.8.17]
❯ pip install -e .
Obtaining file:///home/olivier/GDrive/dev/jupyterlab-explo/oscar6echo-lab/sa-react-auth-google
  Installing build dependencies ... done
  Checking if build backend supports build_editable ... done
  Getting requirements to build editable ... done
  Installing backend dependencies ... done
  Preparing editable metadata (pyproject.toml) ... error
  error: subprocess-exited-with-error

  × Preparing editable metadata (pyproject.toml) did not run successfully.
  │ exit code: 1
  ╰─> [44 lines of output]
      INFO:hatch_jupyter_builder.utils:Running jupyter-builder
      INFO:hatch_jupyter_builder.utils:Building with hatch_jupyter_builder.npm_builder
      INFO:hatch_jupyter_builder.utils:With kwargs: {'build_cmd': 'install:extension', 'npm': ['jlpm'], 'source_dir': 'src', 'build_dir': 'jupyterlab_examples_react_auth_google/labextension'}
      INFO:hatch_jupyter_builder.utils:Installing build dependencies with npm.  This may take a while...
      INFO:hatch_jupyter_builder.utils:> /tmp/pip-build-env-6iqywlrr/overlay/bin/jlpm install
      Traceback (most recent call last):
        File "/tmp/pip-build-env-6iqywlrr/overlay/bin/jlpm", line 8, in <module>
          sys.exit(main())
        File "/tmp/pip-build-env-6iqywlrr/overlay/lib/python3.8/site-packages/jupyterlab/jlpmapp.py", line 43, in main
          execvp("node", ["node", YARN_PATH, *argv])
        File "/tmp/pip-build-env-6iqywlrr/overlay/lib/python3.8/site-packages/jupyterlab/jlpmapp.py", line 24, in execvp
          cmd = which(cmd)
        File "/tmp/pip-build-env-6iqywlrr/overlay/lib/python3.8/site-packages/jupyterlab_server/process.py", line 58, in which
          raise ValueError(msg)
      ValueError: Please install Node.js and npm before continuing installation. You may be able to install Node.js from your package manager, from conda, or directly from the Node.js website (https://nodejs.org).
      Traceback (most recent call last):
        File "/home/olivier/miniconda3/lib/python3.8/site-packages/pip/_vendor/pyproject_hooks/_in_process/_in_process.py", line 167, in prepare_metadata_for_build_editable
          hook = backend.prepare_metadata_for_build_editable
      AttributeError: module 'hatchling.build' has no attribute 'prepare_metadata_for_build_editable'

      During handling of the above exception, another exception occurred:

      Traceback (most recent call last):
        File "/home/olivier/miniconda3/lib/python3.8/site-packages/pip/_vendor/pyproject_hooks/_in_process/_in_process.py", line 353, in <module>
          main()
        File "/home/olivier/miniconda3/lib/python3.8/site-packages/pip/_vendor/pyproject_hooks/_in_process/_in_process.py", line 335, in main
          json_out['return_val'] = hook(**hook_input['kwargs'])
        File "/home/olivier/miniconda3/lib/python3.8/site-packages/pip/_vendor/pyproject_hooks/_in_process/_in_process.py", line 176, in prepare_metadata_for_build_editable
          whl_basename = build_hook(metadata_directory, config_settings)
        File "/tmp/pip-build-env-6iqywlrr/overlay/lib/python3.8/site-packages/hatchling/build.py", line 78, in build_editable
          return os.path.basename(next(builder.build(wheel_directory, ['editable'])))
        File "/tmp/pip-build-env-6iqywlrr/overlay/lib/python3.8/site-packages/hatchling/builders/plugin/interface.py", line 150, in build
          build_hook.initialize(version, build_data)
        File "/tmp/pip-build-env-6iqywlrr/normal/lib/python3.8/site-packages/hatch_jupyter_builder/plugin.py", line 87, in initialize
          raise e
        File "/tmp/pip-build-env-6iqywlrr/normal/lib/python3.8/site-packages/hatch_jupyter_builder/plugin.py", line 82, in initialize
          build_func(self.target_name, version, **build_kwargs)
        File "/tmp/pip-build-env-6iqywlrr/normal/lib/python3.8/site-packages/hatch_jupyter_builder/utils.py", line 113, in npm_builder
          run([*npm_cmd, "install"], cwd=str(abs_path))
        File "/tmp/pip-build-env-6iqywlrr/normal/lib/python3.8/site-packages/hatch_jupyter_builder/utils.py", line 229, in run
          return subprocess.check_call(cmd, **kwargs)
        File "/home/olivier/miniconda3/lib/python3.8/subprocess.py", line 364, in check_call
          raise CalledProcessError(retcode, cmd)
      subprocess.CalledProcessError: Command '['/tmp/pip-build-env-6iqywlrr/overlay/bin/jlpm', 'install']' returned non-zero exit status 1.
      [end of output]

  note: This error originates from a subprocess, and is likely not a problem with pip.
error: metadata-generation-failed

× Encountered error while generating package metadata.
╰─> See above for output.

note: This is an issue with the package mentioned above, not pip.
hint: See above for details.

It looks like the standalone folder misses some config to build...?

[fcollonval]

Thanks a lot for proposing this one @oscar6echo

A couple of comments:

• About the errors when copying - it is an use-case I did not thought about but definitely we should make it work and document it
  • The first error too obscure for me to guess what is wrong without testing it
  • The second error is simpler as it looks like you are missing NodeJS in your environment
• About the code itself
  • This repository is aiming at documenting the JS API by the examples. As this example is adding a new feature not related to some core API, I would prefer it to be a standalone extension in jupyterlab-contrib org for example or maybe directly jupyterlite (cc @jtpio).
  • Another reason, as you mentioned in the description, is that it primarily targets JupyterLite. I would rather left that kind of example out of this repository as JupyterLite adds a new set of technologies on top of an already complex stack for JupyterLab. So this example may confuse the new contributors looking at these examples.

Does those comments make sense? Where would you see this moved?

[oscar6echo]

First thx for the fast reply :+1:

Re the location:

• Even I think it's too generic for jupyterlite. However the jupyterlite doc could mention the auth topic as it is quite early on users/maintainers concerns in real life deployments - this react-auth-google widget is just one possible way to address it with that specific auth provider
• I think the jupyterlab-contrib looks like a more natural place indeed but I cannot create a repo there.

Re how to make it work in a stand alone repo:

Finally deleting the env and starting from scratch again using the jupyterlab-extension-examples conda env, it finally worked. I also deleted all gitignored files/folders.
The building process seems quite complex and I have no idea what residual state provoked the error before...

For now I put the code in a personal repo: https://github.com/oscar6echo/sa-react-auth-google

For ref here are the commands:

[olivier]jupyterlab-explo/oscar6echo-lab/sa-react-auth-google [📦 v0.1.0][ ][🐍 v3.8.17]
❯ conda activate jupyterlab-extension-examples

[olivier]jupyterlab-explo/oscar6echo-lab/sa-react-auth-google [📦 v0.1.0][ v18.16.1][🐍 v3.11.4][🅒 jupyterlab-extension-examples]
❯ touch yarn.lock

[olivier]jupyterlab-explo/oscar6echo-lab/sa-react-auth-google [📦 v0.1.0][ v18.16.1][🐍 v3.11.4][🅒 jupyterlab-extension-examples]
❯ node -v
v18.16.1

[olivier]jupyterlab-explo/oscar6echo-lab/sa-react-auth-google [📦 v0.1.0][ v18.16.1][🐍 v3.11.4][🅒 jupyterlab-extension-examples]
❯ python -m pip install -e .

Obtaining file:///home/olivier/GDrive/dev/jupyterlab-explo/oscar6echo-lab/sa-react-auth-google
  Installing build dependencies ... done
  Checking if build backend supports build_editable ... done
  Getting requirements to build editable ... done
  Installing backend dependencies ... done
  Preparing editable metadata (pyproject.toml) ... done
Building wheels for collected packages: jupyterlab_examples_react_auth_google
  Building editable for jupyterlab_examples_react_auth_google (pyproject.toml) ... done
  Created wheel for jupyterlab_examples_react_auth_google: filename=jupyterlab_examples_react_auth_google-0.1.0-py3-none-any.whl size=136803 sha256=280156e472c9f36790c147b39baf83d6067ba387df87cd4ef084b132c0b7068b
  Stored in directory: /tmp/pip-ephem-wheel-cache-msc25sav/wheels/44/2c/d4/6645e3815bb8d3fc94f7e40db55455c4dddaca334c8ac32ff2
Successfully built jupyterlab_examples_react_auth_google
Installing collected packages: jupyterlab_examples_react_auth_google
Successfully installed jupyterlab_examples_react_auth_google-0.1.0

[olivier]jupyterlab-explo/oscar6echo-lab/sa-react-auth-google [📦 v0.1.0][ v18.16.1][🐍 v3.11.4][🅒 jupyterlab-extension-examples][⏱ 48s]
❯ jupyter labextension develop . --overwrite
Installing /home/olivier/GDrive/dev/jupyterlab-explo/oscar6echo-lab/sa-react-auth-google/jupyterlab_examples_react_auth_google/labextension -> @jupyterlab-examples/react-auth-google
Removing: /home/olivier/miniconda3/envs/jupyterlab-extension-examples/share/jupyter/labextensions/@jupyterlab-examples/react-auth-google
Symlinking: /home/olivier/miniconda3/envs/jupyterlab-extension-examples/share/jupyter/labextensions/@jupyterlab-examples/react-auth-google -> /home/olivier/GDrive/dev/jupyterlab-explo/oscar6echo-lab/sa-react-auth-google/jupyterlab_examples_react_auth_google/labextension

[olivier]jupyterlab-explo/oscar6echo-lab/sa-react-auth-google [📦 v0.1.0][ v18.16.1][🐍 v3.11.4][🅒 jupyterlab-extension-examples]
❯ jlpm build                                
Building extension in .

Compilation starting…

Compilation finished

asset vendors-node_modules_dexie_dist_modern_dexie_mjs.af12ad285eb0bc686b59.js 192 KiB [emitted] [immutable] (id hint: vendors) 1 related asset
asset style_index_js.256547e127ecadb0d4e8.js 31.4 KiB [emitted] [immutable] 1 related asset
asset lib_index_js.f9ca5b2bf02e271ef7cb.js 30.7 KiB [emitted] [immutable] 1 related asset
asset remoteEntry.f3bb4475bf4986c6e95b.js 28.3 KiB [emitted] [immutable] (name: @jupyterlab-examples/react-auth-google) 1 related asset
runtime modules 19.1 KiB 13 modules
javascript modules 228 KiB
  modules by path ./lib/ 17.5 KiB 11 modules
  modules by path ./node_modules/ 199 KiB 9 modules
  modules by path ./style/ 11 KiB 5 modules
  container entry 42 bytes [built] [code generated]
consume-shared-module modules 210 bytes
  modules by path consume shared module (default) @jupyterlab/*.3 (singleton) 126 bytes
    consume shared module (default) @jupyterlab/apputils@^4.1.3 (singleton) 42 bytes [built] [code generated]
    + 2 modules
  consume shared module (default) react@^18.2.0 (singleton) 42 bytes [built] [code generated]
  consume shared module (default) dexie@^3.2.4 (strict) (fallback: ./node_modules/...(truncated) 42 bytes [built] [code generated]
provide-module modules 84 bytes
  provide shared module (default) @jupyterlab-examples/react-auth-google@0.1.0 = ...(truncated) 42 bytes [built] [code generated]
  provide shared module (default) dexie@3.2.4 = ./node_modules/dexie/dist/mo...(truncated) 42 bytes [built] [code generated]
webpack 5.88.2 compiled successfully in 483 ms

[olivier]jupyterlab-explo/oscar6echo-lab/sa-react-auth-google [📦 v0.1.0][ v18.16.1][🐍 v3.11.4][🅒 jupyterlab-extension-examples][⏱ 8s]
❯ 

[jtpio]

The jupyterlab-contrib org would likely be a good place. Maybe the name of the repo could have the -example suffix to indicate this is an example repo and not an extension that can be installed directly.

Thanks @oscar6echo for putting that together and sharing it :+1:

[jtpio]

Agree there should be a dedicated page in the JupyterLite docs to give it more visibility.

[oscar6echo]

Re repo name, what about jupyterlab-extension-example-react-auth-google ?

With more info in the README to explain how it was build (as a folder in jupyterlab/extension-examples) and where it is meant to be used (mostly jupyterlite) and its main components (non trivial jupyterlab extension react widget, Google auth js lib, write to IDB from extension, read IDB from kernel(s)).

Anyway, whatever name you think is appropriate will do, whatever disclaimer you think are needed are fine with me.

[fcollonval]

Hey @oscar6echo

so let's move it to jupyterlab-contrib. Would you mind opening an issue requesting ownership transfer? In parallel, you should receive an invitation to become an owner on that org. So you can proceed with the transfer (I will reduce your rights on the org - but not the repo afterwards).

Regarding the naming, let's go with react-auth-google-example to avoid something too long :wink:

[oscar6echo]

Done by your (clear) instructions.

You can now restrict the rights as you see fit.

[fcollonval]

Thanks a lot @oscar6echo

I guess we can close this issue and the associated PR.

[oscar6echo]

The pleasure was mine.
Closing.