Questions for Vue3 - Pinia Store - Keycloak - Capacitor Example

[Excel1]

Questions for Vue3 - Pinia Store - Keycloak - Capacitor Example

[Badisi]

FYI, demo for integration with Capacitor was already made here : #537.
(more specifically, this comment)

[Excel1]

@Badisi thank you for the fast replay. But i dont like its again another wrapper tbh. But it seems that there is currently no solution to achive that without a wrapper right? i appreciate your work - does your solution work with exactly my prerequisites? And how do i implement it?

[Excel1]

"Crypto.subtle is available only in secure contexts (HTTPS)." This error makes it impossible to test oidc in by using local ips in a private network (without setting up certificates and more).

[Badisi]

I was not intended to make you use my wrapper, but rather direct you towards a concrete example.
So that it can save you time to develop your Capacitor side 😉

---

But if you do choose to use my wrapper, please let me know and I will be happy to help

[Excel1]

@Badisi

I try two different approaches

1. Continue with only oidc-client.ts but the usermanager didnt recieve the token from App.Listener(url) everything works okay but some different error happens

2. Starting with your lib - i installed it already and try to see how to implement it in my code. But without documentation its very hard to implement it in my vue3 application :)

[Excel1]

I already created a hybrid app by using angular. I used this lib https://github.com/manfredsteyer/angular-oauth2-oidc and it works perfectly - but it seems this lib and vue seems to work different...

[Excel1]

import { boot } from 'quasar/wrappers';
import { useAuthStore } from 'stores/auth.store';
import { App, URLOpenListenerEvent } from '@capacitor/app';

export default boot (({app, router}) => {

  async function initializeOidcAfterRouting() {
    console.log("OIDC client initialized")
    try {
      await authStore.initOidcClient(true); 
    } catch (error) {
      console.error('Failed to initialize OIDC client:', error);
      // Handle error (e.g., redirect to an error page)
    }
  }

  App.addListener('appUrlOpen', function (event: URLOpenListenerEvent) {
    // Example url: https://beerswift.app/tabs/tabs2
    // slug = /tabs/tabs2
    const slug = event.url.split('myapp://login').pop();

    // We only push to the route if there is a slug present
    if (slug) {
      router.push(slug).then(() => {
        initializeOidcAfterRouting();
      });
    }
  });

  const authStore = useAuthStore();

  function sleep(ms: number) {
    return new Promise(resolve => setTimeout(resolve, ms))
  }

  router.beforeEach(async (to, from, next) => {

    // wait till oidc is initiated
    while (authStore.getUser === undefined) {
      await sleep(100)
    }

    // clear url from keycloak state
    if (authStore.isAuthenticated && to.fullPath.includes('/login')) {
      next('/')
    }

    console.log(authStore.isAuthenticated)

    if (to.matched.some(record => record.meta?.requiresAuth)) {
      if (authStore.isAuthenticated) {
        next()
      } else {
        next('/home')
      }
    } else {
      next()
    }
  })
})

I think the only thing i need from now is, to get the token from keycloak to the usermanager. Everything works but on redirect the usermanager cant retrieve the token. This App uses history mode but however the url from android deeplink is converted to localhodst:5200/#/login?state...

It seems the usermanager cant work with the hash and i dont know how to solve it