@uptake-affinity/react v1.0.3

@uptake-affinity/react

Step 1: Install the Package

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

npm i @uptake/affinity-react

Step 2: Import the UptakeAffinity Component

You can import the UptakeAffinity component from the package in your React component like this:

import { UptakeAffinity } from '@uptake/affinity-plugin-react';

Step 3: Use the UptakeAffinity Component

Once you have imported the UptakeAffinity component, you can use it in your React component with the following props:

<IUptakeAffinity
  realm="your_realm"
  containerHeight="your_container_height"
/>

Here's an example of how to use the UptakeAffinity component in a React component:

import React from 'react';
import { UptakeAffinity, IUptakeAffinity } from '@uptake/affinity-react';

const MyComponent = () => {
  const uptakeAffinityProps: IUptakeAffinity = {
    realm: 'my_realm',
    containerHeight: '500px'
  };

  return (
    <div>
      <UptakeAffinity {...uptakeAffinityProps} />
    </div>
  );
};

export default MyComponent;

In the example above, the UptakeAffinity component is passed the required prop realm, and an optional prop (containerHeight).

That's it! You should now be able to use the Uptake Affinity React package in your React 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-react login flow:

// src/App.js
import React from 'react';
import { useAuth0 } from '@auth0/auth0-react';
import { buildAffinityLoginUrl } from '@uptake/buildAffinityLoginUrl';

function App() {
  const { isLoading, isAuthenticated, error, user, loginWithRedirect, logout } = useAuth0();
  const kcIdpHint = 'auth0-affinity'
  const clientId = 'v5k-js'
  const realm = 'affinity-test';

  const handleLogin= () => loginWithRedirect({
        openUrl: async () => window.location.assign(buildAffinityLoginUrl(window.location.origin, realm, kcIdpHint, clientId))
    })
    if (isLoading) {
        return <div>Loading...</div>;
    }
    if (error) {
        return <div>Oops... {error.message}</div>;
    }

    if (isAuthenticated) {
        return (
            <div>
                Hello {user.name}{' '}
                <button onClick={() => logout({ returnTo: window.location.origin })}>
                    Log out
                </button>
            </div>
        );
    } else {
        return <button onClick={() => handleLogin()}>Log in</button>;
    }
}

export default App;

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.