Auth with Popup

In this integration guide, we will show how to add Authorize with JoyID with the pop-up feature to a simple App. To complete this integration, you just need to be a JavaScript developer with a few minutes of time.

Let's said we have an app like this:

import * as React from 'react';
import './style.css';

export default function App() {
  return (
      <div>
          <h1>Hello JoyID!</h1>
      </div>
  );
}

<template>
  <div id="app">
      <h1>Hello JoyID!</h1>
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

To authorize with JoyID with the pop-up feature, we just need to add a button element and listen to the onClick event:

import * as React from 'react';
import { authWithPopup } from '@joyid/core';
import './style.css';

export default function App() {
  const authOnClick = async () => {
      const res = await authWithPopup({
          redirectURL: location.origin + '/',
          name: 'Awesome App',
          challenge: 'Sign this for me',
          logo: 'https://reactjs.org/logo-180x180.png',
      });
      if (res.error == null) {
          console.log(`Authenticated user info:`, res.data);
      }
  };
  return (
      <div>
          <h1>Hello JoyID!</h1>
          <button onClick={authOnClick}>Auth With JoyID</button>
      </div>
  );
}

<template>
  <div id="app">
      <h1>Hello JoyID!</h1>
      <button @click="auth">Auth with JoyID</button>
  </div>
</template>

<script>
import { authWithPopup } from '@joyid/core';

export default {
  name: 'App',
  methods: {
      async auth() {
          const res = await authWithPopup({
              redirectURL: location.href,
              name: 'Awesome App',
              challenge: 'Sign this for me',
              logo: 'https://vuejs.org/images/logo.png',
          });
          if (res.error == null) {
              console.log(`Authenticated user info:`, res.data);
          }
      },
  },
};
</script>

Try it out

Caveats

Popup window blocked

A popup window must be trigger by ACTUAL user interaction. For example, the following code will not work, some browsers may block the popup window:

// open popup window in useEffect or other lifecycle function
useEffect(() => {
    await authWithPopup({
        redirectURL: location.href,
        name: 'Awesome App',
        challenge: 'Sign this for me',
        logo: 'https://vuejs.org/images/logo.png',
    });
}, [])

We recommend to use a HTML Element and listen to the click or touchstart event to open the popup window. Before calling authWithPopup function, you should also NOT calling any async function, otherwise the popup window may be blocked by the browser as well.

challenge is not the one I requested

For security reasons you cannot fully specify the challenge you need to sign during authentication, for example you need to sign the challenge as:

Sign this message

What the user actually signs when signing is:

JoyID authorize prefix:
Sign this message