@uptake-affinity/vue

Step 1: Install the package

You can install the package via npm by running the following command in your terminal:

npm i @uptake-affinity/vue

Step 2: Import the package

After installation, you can import the package in your Vue component using the following code:

import UptakeAffinity from '@uptake-affinity/vue'

Step 3: Use the component

Now you can use the UptakeAffinity component in your Vue template by passing the required props to it. Here's an example code snippet with the required props interface:

<template>
  <UptakeAffinity
    :realm="realm"
    :containerHeight="containerHeight"
  />
</template>

<script>
import UptakeAffinity from '@uptake-affinity/vue'

export default {
  components: {
    UptakeAffinity,
  },
  data() {
    return {
      realm: 'your_realm',
      containerHeight: '100%', // optional prop
    }
  },
}
</script>

In this example, you'll notice that we're passing the required props to the component: realm. The containerHeight prop is optional.

That's it! With these steps, you can start using the Uptake Affinity package in your Vue 3 project.

buildAffinityLoginUrl

The buildAffinityLoginUrl function is used to build a login URL for Auth0 and Keycloak identity providers. The function takes in three parameters: redirectUri, realm, and kcIdpHint. It then uses these parameters to construct a URL for initiating a login flow with the specified identity provider.

Parameters

• redirectUri (required): The URI to which the user will be redirected after logging in. This must be a valid URI that has been configured in the identity provider's settings.

• realm (required): The realm or tenant in which the user is logging in. This value should match the realm or tenant configured in the identity provider.

• kcIdpHint (required): The ID of the identity provider that should be used to authenticate the user in Keycloak.

• keycloakRootUrl (optional): The URL of the Keycloak callback URL, defaults to https://login.uptake.com.

Return value

The function returns a login URL that can be used to initiate a login flow with the specified identity provider. This URL includes query parameters that are specific to the identity provider being used, such as the client_id, response_type, scope, redirect_uri, and kc_idp_hint parameters.

Example usage

Here is an example usage of the buildAffinityLoginUrl function with a @auth0/auth0-vue login flow:

<script setup lang="ts">
import { useAuth0 } from '@auth0/auth0-vue'
import { buildAffinityLoginUrl } from '@uptake/buildAffinityLoginUrl';

const kcIdpHint = 'auth0-affinity'
const clientId = 'v5k-js'
const realm = 'affinity-test';

const { logout, loginWithRedirect } = useAuth0()

const handleLogin = () => loginWithRedirect({
  openUrl: async () => window.location.assign(buildAffinityLoginUrl(window.location.origin, realm, kcIdpHint, clientId))
})
const handleLogout = () => logout({ logoutParams: { federated: true }})

</script>

In this example, we are importing the buildAffinityLoginUrl function from the @uptake-affinity/vue package. We then pass in the required redirectUri and realm parameters, as well as the optional kcIdpHint parameter, to construct a login URL for a Keycloak identity provider. Finally, we redirect the user to the constructed login URL using the window.location.href property.