foursec-challenge v0.0.1

Foursec Challenge

Tiny frontend UI component to enable additional authentication logic using FourSec graphical challenge

Installation

#npm
npm i foursec-challenge

# yarn
yarn add foursec-challenge

Demo

Link to the demo project: https://link

Usage

Using SetChallenge component

import { useEffect } from "react";
import {
  SetChallenge,
  PresetType,
  ChallengeDataType,
} from "foursec-challenge";

const Component = () => {
  const [preset, setPreset] = useState<PresetType>();

  const fetchPreset = async () => {
    const response = await fetch("<link>", {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
      },
    });
    const { data } = await response.json();
    setPreset(data);
  };

  const saveChallenge = async (challenge: ChallengeDataType) => {
    const { data } = await fetch("<link>", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
         device_traits: {
          ...
        },
        challenge,
        user_uuid: "<user_uuid>",
      }),
    });

    if (data.success) {
      // do something
    }
  };

  useEffect(() => {
    fetchPreset();
  }, []);

  return (
   <SetChallenge preset={preset} onChange={saveChallenge} />
  )
};

Using SolveChallenge component

import { useEffect } from "react";
import {
  SolveChallenge,
  PresetType,
  ChallengeDataType,
} from "foursec-challenge";

const Component = () => {
  const [preset, setPreset] = useState<PresetType>();

  const fetchPreset = async () => {
    const response = await fetch("<link>", {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
      },
    });
    const { data } = await response.json();
    setPreset(data);
  };

  const verifyChallenge = async (challenge: ChallengeDataType) => {
    const { data } = await fetch("<link>", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
         device_traits: {
          ...
        },
        challenge,
        user_uuid: "<user_uuid>",
      }),
    });

    if (data.success) {
      // do something
    }
  };

  useEffect(() => {
    fetchPreset();
  }, []);

  return (
   <SolveChallenge preset={preset} onChange={verifyChallenge} />
  )
};

License

MIT