Skip to main content

Use a PIN

In the previous tutorial we learnt how to join an unprotected conference, but in day to day usage, we will encounter some conferences that are protected by a PIN (a security passcode). In this lesson we will learn how join protected conferences by following the next steps:

  • Identify when a conference is protected by a PIN.
  • Enter the conference with the PIN provided by the user.

You can download the starter code from Step.02-Exercise-Use-a-pin.

App component​

To implement this feature, we only have to modify the file src/App.tsx, since the rest of the pieces are already on place.

The first step is to define two new states that indicate if the user can or have to enter a PIN (PinRequired and PinOptional):

enum ConnectionState {
  Disconnected,
  Connecting,
  Connected,
  PinRequired,
  PinOptional,
  Error,
}

Now we define some state variables that will contain the info that the user needs to enter:

const [nodeDomain, setNodeDomain] = useState<string>('');
const [conferenceAlias, setConferenceAlias] = useState<string>('');
const [displayName, setDisplayName] = useState<string>('');

The meaning of each one these parameters is the following:

  • nodeDomain: It indicates the domain or IP of the Pexip Conference Node that we will use to connect.
  • conferenceAlias: This parameter refers to the conference that the user will connect. Sometimes it's also called VMR (Virtual Meeting Room).
  • displayName: Indicates the name to be displayed in the participants list.

Now we will modify the handleStartConference function and save the value of these parameters in the state variable:

const handleStartConference = async (nodeDomain: string, conferenceAlias: string, displayName: string) => {
  setNodeDomain(nodeDomain);
  setConferenceAlias(conferenceAlias);
  setDisplayName(displayName);
  ...
};

And inside the same function, we will modify the error 403 to only display a warning:

case 403: {
  console.warn('The conference is protected by PIN');
  break;
}

Now we need to attach a handler to the signal onPinRequired:

useEffect(() => {
  ...
  infinityClientSignals.onPinRequired.add(({hasHostPin, hasGuestPin}) => {
    if (hasHostPin && hasGuestPin) {
      setConnectionState(ConnectionState.PinRequired);
    } else {
      setConnectionState(ConnectionState.PinOptional);
    }
  });
  ...
});

This function will receive two parameter that indicate if the host or guest should enter a PIN. Depending on these values, we change the connection state to PinRequired or PinOptional.

Now we will make use of a component that we have created previously. This component will display a panel in which the user can enter their PIN:

let component;
switch (connectionState) {
  case ConnectionState.PinRequired:
    component = <Pin onSubmit={ handleSetPin } required={true}/>;
    break;
  case ConnectionState.PinOptional:
    component = <Pin onSubmit={ handleSetPin } required={false}/>;
    break;
  ...
}

You will have noticed that we pass an additional property to the component called required. This property indicates if the PIN can be left blank.

Now we will define the function that will be called once the user enters their PIN:

const handleSetPin = (pin: string) => {
  const currentPin = pin !== '' ? pin : 'none';
  infinityClient.setPin(currentPin);
  handleStartConference(nodeDomain, conferenceAlias, displayName);
  setConnectionState(ConnectionState.Connecting);
};

This function will change the connection state to Connecting and connect to the conference with the provided PIN.

Run the app​

Before testing this feature, you should use the Pexip Management Node to create a new VMR (Virtual Meeting Room) and set a PIN. Once you try to enter in that conference, you will see a new panel asking for the it, and if you enter the right PIN, you will go inside the conference.

You can compare your code with the solution in Step.02-Solution-Use-a-pin. You can also check the differences with the previous lesson in the git diff.

PIN