Auth with Redirect

In this integration guide, we will show how to redirect to JoyID App to authorize in 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:

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

export default function App() {
  return (
      <div>
          <h1>Hello JoyID!</h1>
      </div>
  );
}
Vue
<template>
  <div id="app">
      <h1>Hello JoyID!</h1>
  </div>
</template>

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

To redirect to JoyID App to authorize, we need to do the following steps:

Step 1: Add a redirect button

We need to add a button element to document and listen to the onClick event, then call authWithRedirect function:

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

export default function App() {
  const authOnClick = async () =>  {
      authWithRedirect({
          redirectURL: location.href,
          name: 'Awesome App',
          challenge: 'Sign this for me',
          logo: 'https://reactjs.org/logo-180x180.png',
      });
  };
  return (
      <div>
          <h1>Hello JoyID!</h1>
          <button onClick={authOnClick}>Auth With JoyID</button>
      </div>
  );
}
Vue
<template>
  <div id="app">
      <h1>Hello JoyID!</h1>
      <button @click="auth">Auth with JoyID</button>
  </div>
</template>

<script>
import { authWithRedirect } from '@joyid/core';
export default {
  name: 'App',
  methods: {
      async auth() {
          authWithRedirect({
              redirectURL: location.href,
              name: 'Awesome App',
              challenge: 'Sign this for me',
              logo: 'https://vuejs.org/images/logo.png',
          });
      },
  },
};
</script>
To learn more about the authWithRedirect function, please check the API Reference.

The challenge options is optional.

Step 2: Get redirected result

After the user authorized with JoyID App, the user will be redirected back to your App with the result in the URL query string. We need to call authCallbck function in your redirected page to get the result:

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

export default function App() {
  const isRedirectFromJoyID = new URL(location.href).searchParams.has(
      'joyid-redirect'
  );
  const authOnClick = async () =>  {
      authWithRedirect({
          redirectURL: location.href,
          name: 'Awesome App',
          challenge: 'Sign this for me',
          logo: 'https://reactjs.org/logo-180x180.png',
      });
  };
  React.useEffect(() => {
      if (isRedirectFromJoyID) {
          const authRes = authCallback();
          if (authRes.error == null && authRes.type === 'Auth') {
              // see console for the details
              console.log(`Authenticated user info:`, authRes.data);
          }
      }
  }, []);
  return (
      <div>
          <h1>Hello JoyID!</h1>
          <button onClick={authOnClick}>Auth With JoyID</button>
      </div>
  );
}
Vue
<template>
  <div id="app">
      <h1>Hello JoyID!</h1>
      <button @click="auth">Auth with JoyID</button>
  </div>
</template>

<script>
import { authWithRedirect, authCallback } from '@joyid/core';
export default {
  name: 'App',
  methods: {
      async auth() {
          authWithRedirect({
              redirectURL: location.href,
              name: 'Awesome App',
              challenge: 'Sign this for me',
              logo: 'https://vuejs.org/images/logo.png',
          });
      },
  },
  created() {
      const isRedirectFromJoyID = new URL(location.href).searchParams.has(
          'joyid-redirect'
      );

      if (isRedirectFromJoyID) {
          const res = authCallback();
          if (res.error == null) {
              // see console for the details
              console.log(`Authenticated user info:`, res.data);
          }
      }
  },
};
</script>

Note that after redirected back to your App, a joyid-redirect query string will be added to the URL. You can check if the URL contains this query string to determine whether authCallck should be called.

To learn more about the authCallback function, please check the API Reference.

Try it out

For browser security reasons, you may need to open the URL of this Demo (React, Vue) in order to test it properly.
Loading Sandbox...
Loading Sandbox...

Caveats

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
Edit this page on GitHub
Table of Contents