Android URL scheme launching app but not passing parameter

Capacitor
1

Hi! I’m trying to launch my android app from an external URL as part of an authentication flow.

My app first redirects to the oauth-like authentication, and then the callback is something like “com.my.app://?code=”.

App is launching, but the code parameter is apparently not being received.

Here’s what I did, first added the intent:

            <intent-filter>
                <data android:scheme="com.my.app" />
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
            </intent-filter>

Then in my Vue router I added this:

App.addListener('appUrlOpen', () => {
  router.push({
    path: '/login',
  });
});

And my backend is basically returning to “com.my.app://”, so final URL should be something like this:

com.my.app://?code=

I’ve been reading this: Capacitor - build cross platform apps with the web

Is there some step I’m leaving behind?

Thanks!

2

how are you checking that the url doesn’t have any parameters?
can you try with this code?

App.addListener('appUrlOpen', data => {
  console.log('App opened with URL:', data);
});
3

thanks @jcesarmobile, I checked parameters and are actually being read.

So now the problem is that the router.push() is not working from the appUrlOpen event.

I’ve checked that the event is actually being executed, but the router.push() is not triggering redirection.

I may be defining the event in the wrong place (I used docs code)

Here’s my router:

import { App } from '@capacitor/app';
import Vue from 'vue';
import VueRouter from 'vue-router';
import Login from '../views/Login.vue';
import * as _ from 'lodash';

Vue.use(VueRouter);

const routes = [
  {
    path: '/login',
    name: 'login',
    component: Login,
    alias: '/'
  },
  {
    path: '/home',
    name: 'home',
    component: () => import(/* webpackChunkName: "about" */ '../views/Home.vue')
  },
  {
    path: '/talk/:type',
    name: 'talk',
    component: () => import(/* webpackChunkName: "about" */ '../views/Talk.vue')
  }
];

const router = new VueRouter({
  mode: 'history',
  routes
});

App.addListener('appUrlOpen', (event) => {
  const queryParam = _.split(_.split(event.url, '?')[1], '=');

  // this ends up being "query: { 'code': 'asdsadfsadf' }"
  router.push({
    path: 'login',
    query: { [`${queryParam[0]}`]: queryParam[1] }
  });
});

export default router;
4

It was finally a Vue Router thing.

I was trying to redirect to /login from /login, that doesn’t trigger a page reload, so I had to listen for route params changes.

This is specified here: Dynamic Route Matching | Vue Router