[Nuxt 3] Authentication using @sidebase/nuxt-auth

Assumptions:

1. Nuxt 3 framework + @sidebase/nuxt-auth for authentication + Pinia as store.
2. Entering a secure page should redirect to a login window and after logging in with a proxy back to the desired page.
3. When the token expires, refresh it without having to log in again. So that it is as transparent as possible for the user. Redirect to the login window only when the token fails to refresh using the current refresh_token.
4. Retrieve JSON from the backend (e.g. current date and string list from the sample urls).
5. The API url configuration should come from an external configuration file (e.g. .env file) which can be overridden depending on the environment on which the application will be run and depending on the specific API on which it is to be based.

6. Graphics are not important. Modest simple CSS styles, such as those derived from Bootstrap, will suffice.


Example requests:

Unsecured (publicly accessible):
GET https://example.com/public/one
GET https://example.com/public/two


Secured, for the use of which you must provide a token (Bearer Token):
GET https://example.com/secured/one
GET https://example.com/secured/two


User authentication:

POST https://example.com/public/users/login
{
"username": "foo",
"password": "bar"
}

Example response:
{
"access_token": "eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICJGSGtFX3o4U0lzTmtJU2FaNGlNTXJHamRGZWlBOXVOc1FlSDJxQmZlajk4In0.eyJleHAiOjE3MzAzNzg2MTEsImlhdCI6MTczMDM3ODMxMSwianRpIjoiNjAxZjNlOGQtOTVlNy00YTI1LWEwNDEtNDNmOGIzZjZmYjM5IiwiaXNzIjoiaHR0cDovL2tleWNsb2FrOjgwODAvcmVhbG1zL2VoY3IiLCJ0eXAiOiJCZWFyZXIiLCJhenAiOiJhZG1pbi1jbGkiLCJzaWQiOiJjNmMwODczNC1mMTFkLTQ2NTUtYjExOS1iYWFhMDE4MGI0MTkiLCJyZWFsbV9hY2Nlc3MiOnsicm9sZXMiOlsiRUhDUl9VU0VSIiwiRUhDUl9BRE1JTklTVFJBVE9SIl19LCJzY29wZSI6ImVtYWlsIHByb2ZpbGUiLCJwcmVmZXJyZWRfdXNlcm5hbWUiOiJwb2MiLCJlbWFpbCI6InBvY0Bwb2MucGwifQ.Zk-DSdjEhkR-5Ht1zluD4hqkjVGY9rSIfJ1oHOUjut2hqJGQVsb_wA8KUr0PCP_t3v8GIMCryn8Pdoccxu2FUM6ySxIZ-iJQI3miIyTSLv4kfBFZvWm12YKtyMlROZe06C-f8X0h2OVvQhKzgCl8626YmQaLSc9XF52DBFd6JHWXHodWhf-___F3PgcK1JkYbS3RBMA0-z4TlwmfZOBVMcSpmUbgQ11NSMMFA_-C7FUmcUGxT3ByiqnenBYuiW2gcbt33WHCnbvv92feJ0tYWN1o9HdLS-7Kc1J1wk-O91IRMyOVN1-PvdIoRSgL9s0HcEDgztUf_sbTTN1GeOEtsQ",
"refresh_token": "eyJhbGciOiJIUzUxMiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICI4MzBmNzE3NS1mOWIxLTRhOTMtYTVlMC0zYWM0MjcxODVmYTEifQ.eyJleHAiOjE3MzAzODAxMTEsImlhdCI6MTczMDM3ODMxMSwianRpIjoiNmQ0ZjA3NmItN2RiYy00NjExLTllOGMtNGE1OGNjYWNmNDY3IiwiaXNzIjoiaHR0cDovL2tleWNsb2FrOjgwODAvcmVhbG1zL2VoY3IiLCJhdWQiOiJodHRwOi8va2V5Y2xvYWs6ODA4MC9yZWFsbXMvZWhjciIsInR5cCI6IlJlZnJlc2giLCJhenAiOiJhZG1pbi1jbGkiLCJzaWQiOiJjNmMwODczNC1mMTFkLTQ2NTUtYjExOS1iYWFhMDE4MGI0MTkiLCJzY29wZSI6ImFjciByb2xlcyBlbWFpbCB3ZWItb3JpZ2lucyBwcm9maWxlIGJhc2ljIn0.7bTbMXLiCeQMA6gi3Aw-LMu_93U3LN56dmbqh6JWwmyS-q6pOdr-a8X0t7RzFyoYg6wg4Vh7x57iqfO9uNiVrA",
"expires_in": 300,
"refresh_expires_in": 1800
}


Method for refresh token:

POST https://example.com/public/users/refresh
{
"refreshToken": "eyJhbGciOiJIUzUxMiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICI4MzBmNzE3NS1mOWIxLTRhOTMtYTVlMC0zYWM0MjcxODVmYTEifQ.eyJleHAiOjE3MzAzODAxMTEsImlhdCI6MTczMDM3ODMxMSwianRpIjoiNmQ0ZjA3NmItN2RiYy00NjExLTllOGMtNGE1OGNjYWNmNDY3IiwiaXNzIjoiaHR0cDovL2tleWNsb2FrOjgwODAvcmVhbG1zL2VoY3IiLCJhdWQiOiJodHRwOi8va2V5Y2xvYWs6ODA4MC9yZWFsbXMvZWhjciIsInR5cCI6IlJlZnJlc2giLCJhenAiOiJhZG1pbi1jbGkiLCJzaWQiOiJjNmMwODczNC1mMTFkLTQ2NTUtYjExOS1iYWFhMDE4MGI0MTkiLCJzY29wZSI6ImFjciByb2xlcyBlbWFpbCB3ZWItb3JpZ2lucyBwcm9maWxlIGJhc2ljIn0.7bTbMXLiCeQMA6gi3Aw-LMu_93U3LN56dmbqh6JWwmyS-q6pOdr-a8X0t7RzFyoYg6wg4Vh7x57iqfO9uNiVrA"
}