keycloak-modern-login/src/views/select-authenticator/index.vue

<template>
  <layout>
    <h1
      v-if="context.auth.attemptedUsername && context.auth.showUsername"
      class="text-3xl font-semibold text-center text-gray-700">
      Welcome {{ context.auth?.attemptedUsername }}!
    </h1>
    <h1 v-else class="text-3xl font-semibold text-center text-gray-700">
      Welcome!
    </h1>
    <p class="text-center mt-3">
      Please select a second factor you would like to use:
    </p>
    <div class="flex flex-col items-center mt-10 text-gray-700">
      <div
        v-if="$data.selection.webauthn.show"
        @click="useMethod($data.selection.webauthn.execId)"
        class="flex flex-row items-center w-full p-5 bg-white shadow-lg transition ease-in-out duration-150 hover:scale-105 hover:cursor-pointer rounded-md">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="w-8 h-8"
          fill="currentColor"
          viewBox="0 0 16 16">
          <path
            d="M6 .5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4H6v-4ZM7 1v1h1V1H7Zm2 0v1h1V1H9ZM5.5 5a.5.5 0 0 0-.5.5V15a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1V5.5a.5.5 0 0 0-.5-.5h-6Z" />
        </svg>
        <div class="flex flex-col ml-5 leading-none">
          <h2 class="mb-1.5 font-semibold">Hardware Security Key</h2>
          <p class="text-sm">Authenticate using a WebAuthn capable device</p>
        </div>
      </div>
      <div
        v-if="$data.selection.otp.show"
        @click="useMethod($data.selection.otp.execId)"
        class="flex flex-row items-center w-full p-5 mt-4 bg-white shadow-lg transition ease-in-out duration-150 hover:scale-105 hover:cursor-pointer rounded-md">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="w-8 h-8"
          fill="currentColor"
          viewBox="0 0 16 16">
          <path
            d="M8.515 1.019A7 7 0 0 0 8 1V0a8 8 0 0 1 .589.022l-.074.997zm2.004.45a7.003 7.003 0 0 0-.985-.299l.219-.976c.383.086.76.2 1.126.342l-.36.933zm1.37.71a7.01 7.01 0 0 0-.439-.27l.493-.87a8.025 8.025 0 0 1 .979.654l-.615.789a6.996 6.996 0 0 0-.418-.302zm1.834 1.79a6.99 6.99 0 0 0-.653-.796l.724-.69c.27.285.52.59.747.91l-.818.576zm.744 1.352a7.08 7.08 0 0 0-.214-.468l.893-.45a7.976 7.976 0 0 1 .45 1.088l-.95.313a7.023 7.023 0 0 0-.179-.483zm.53 2.507a6.991 6.991 0 0 0-.1-1.025l.985-.17c.067.386.106.778.116 1.17l-1 .025zm-.131 1.538c.033-.17.06-.339.081-.51l.993.123a7.957 7.957 0 0 1-.23 1.155l-.964-.267c.046-.165.086-.332.12-.501zm-.952 2.379c.184-.29.346-.594.486-.908l.914.405c-.16.36-.345.706-.555 1.038l-.845-.535zm-.964 1.205c.122-.122.239-.248.35-.378l.758.653a8.073 8.073 0 0 1-.401.432l-.707-.707z" />
          <path
            d="M8 1a7 7 0 1 0 4.95 11.95l.707.707A8.001 8.001 0 1 1 8 0v1z" />
          <path
            d="M7.5 3a.5.5 0 0 1 .5.5v5.21l3.248 1.856a.5.5 0 0 1-.496.868l-3.5-2A.5.5 0 0 1 7 9V3.5a.5.5 0 0 1 .5-.5z" />
        </svg>
        <div class="flex flex-col ml-5 leading-none">
          <h2 class="mb-1.5 font-semibold">Authenticator App</h2>
          <p class="text-sm">
            Authenticate using a one time code from your authenticator app
          </p>
        </div>
      </div>
      <div
        v-if="$data.selection.recovery.show"
        @click="useMethod($data.selection.recovery.execId)"
        class="flex flex-row items-center w-full p-5 mt-4 bg-white shadow-lg transition ease-in-out duration-150 hover:scale-105 hover:cursor-pointer rounded-md">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="w-8 h-8"
          fill="currentColor"
          viewBox="0 0 16 16">
          <path
            fill-rule="evenodd"
            d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z" />
          <path
            d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z" />
        </svg>
        <div class="flex flex-col ml-5 leading-none">
          <h2 class="mb-1.5 font-semibold">Recovery Code</h2>
          <p class="text-sm">Authenticate using one of your recovery codes</p>
        </div>
      </div>
    </div>
  </layout>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import Layout from "~/components/Layout.vue";
import type { KcContextBase } from "~/types/context";
import { formPost } from "~/functions/utils";

export default defineComponent({
  name: "SelectAuthenticator",
  components: {
    Layout,
  },
  data() {
    return {
      context: (window as any).kcContext as KcContextBase.SelectAuthenticator,
      selection: {
        webauthn: {
          show: false,
          execId: "",
        },
        otp: {
          show: false,
          execId: "",
        },
        recovery: {
          show: false,
          execId: "",
        },
      },
    };
  },
  mounted: function () {
    this.context.auth.authenticationSelections.forEach(selection => {
      if (
        selection.authenticationExecution.authenticator ===
        "webauthn-authenticator"
      ) {
        this.selection.webauthn.execId = selection.authExecId;
        this.selection.webauthn.show = true;
      } else if (
        selection.authenticationExecution.authenticator === "auth-otp-form"
      ) {
        this.selection.otp.execId = selection.authExecId;
        this.selection.otp.show = true;
      } else if (
        selection.authenticationExecution.authenticator ===
        "auth-recovery-authn-code-form"
      ) {
        this.selection.recovery.execId = selection.authExecId;
        this.selection.recovery.show = true;
      }
    });
  },
  methods: {
    useMethod(execId: string) {
      formPost(this.context.url.loginAction, {
        authenticationExecution: execId,
      });
    },
  },
});
</script>
<style>
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>