@accounts/oauth package provides a secure system for a OAuth based login strategy.
This example is written in Typescript - remove any type definitons if you are using plain JS.
Setting up a provider
There's an example repo for Google OAuth (React-based): here
Register your app as OAuth client with the provider
For Nextcloud, read their docs to set up your app as an OAuth Client. You'll need the details in the next step.
Create the Login dialog UI
In the appropriate place of your app, place an "Authenticate via Nextcloud" button that will open a popup window for the user to authenticate via the OAuth provider.
When receiving this code, the client will send it to the AccountsJS-based server, which will verify it with the provider (Nextcloud) itself (we will define the serverside part later).
Create a handler for callback URI
The OAuth provider will redirect to the specified
redirectUri with a query string appended
?code=... - as we're still inside the popup window, the handler we define below will take that code and send it via the BroadcastChannel (created when opening the popup window) back to the main window.
oauthLoginChannel.onmessage will use that code to authenticate against your app's accountsjs-based server.
Register a route with your router. Example with vue-router:
Define the handler (example based on vue-router):
Create the provider definition
oauthLoginChannel.onmessage handler, we called:
AccountsJS client will send that code to the server, where define a provider:
The provider is defined like this:
Try it out :)
This should be enough for a basic OAuth setup to work.
Optional: Extend the JWT token
In order to add custom fields to the JWT you need to pass a validateNewUser function when you instantiate the