Add setting for path where user is routed after successful authentication?

[ux-engineer]

This redirectUri configuration value has caused some confusion, which I'm quite sure has done so for others as well.

Your example repo currently has this file vuex-oidc-example/src/views/OidcCallback.vue:

<template>
  <div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'OidcCallback',
  methods: {
    ...mapActions('oidcStore', [
      'oidcSignInCallback'
    ])
  },
  created () {
    this.oidcSignInCallback()
      .then((redirectPath) => {
        this.$router.push(redirectPath)
      })
      .catch((err) => {
        console.error(err)
        this.$router.push('/signin-oidc-error') // Handle errors any way you want
      })
  }
}
</script>

So basically when user is routed to this view, vuex-oidc library redirects (if I understand correctly, at this point redir is done in auth guard level) to authentication server, which - if succesful - redirects back to this path and this view component.

Then this view executes created() hook and oidcSignInCallback() method here, which when succesfully returns redirectPath variable to the closure, which is pushed as the new path for the router.

Isn't this redirectPath same as the configured path for this same route and view component - so nothing happens?

Here I needed to switch this.$router.push(redirectPath) to this.$router.push('/front')...where, in my case, I want the user to be routed after successful authentication.

Shouldn't there be a separate configuration value like afterAuthenticatedRedirectUri and/or afterAuthenticatedRedirectRoutePathName?

[ux-engineer]

Here's my current oidc-callback view written in TypeScript with Vue 3:

<script lang="ts">
import { defineComponent, onMounted } from 'vue';
import { useRouter } from 'vue-router';

import { useStore } from '@/store';
import { useLogger } from '@/composables';

export default defineComponent({
  name: 'OidcCallbackView',
  setup(): void {
    const store = useStore();
    const router = useRouter();
    const { logError } = useLogger();

    onMounted(async () => {
      try {
        // Dispatch oidc signing callback store action
        await store.dispatch('oidc/oidcSignInCallback');
        // Route to home view
        router.push({ name: 'home' });
      } catch (error) {
        // Custom error logging logic
        logError('OidcCallbackView - dispatch oidcSignInCallback', error);
        // Route to signin error view
        router.push({ name: 'oidcCallbackError' });
      }
    });
  },
});
</script>

<template>
  <div>
    <h5>
      Processing authentication...
    </h5>
  </div>
</template>

[ux-engineer]

Or with the new experimental Script Setup syntax with Composition API:

<script setup lang="ts">
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';

import { useStore } from '@/store';
import { useLogger } from '@/composables';

export const name = 'OidcCallbackView';

onMounted(async () => {
  const store = useStore();
  const router = useRouter();
  const { logError } = useLogger();

  try {
    // Dispatch oidc signing callback store action
    await store.dispatch('oidc/oidcSignInCallback');
    // Route to home view
    router.push({ name: 'home' });
  } catch (error) {
    // Log error
    logError('OidcCallbackView - dispatch oidcSignInCallback', error);
    // Route to signin error view
    router.push({ name: 'oidcCallbackError' });
  }
});
</script>

[yoshiyes]

Hello,
@ux-engineer If you want to easily redirect the user to a specific page after login, you can simply use :

<script lang="ts">
import Component from "vue-class-component";
import Vue from "vue";

@Component({
  methods: {
    ...mapActions("oidcStore", ["authenticateOidc"]),
  },
})
export default class Example extends Vue {
  authenticateOidc!: (url?: string) => Promise<void>;

  async loginThenRedirect(): Promise<void> {
    try {
      await this.authenticateOidc("/myCustomRoute/");
    } catch (e) {
      console.error(e);
    }
  }
}
</script>