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.js. 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 (PIN_REQUIRED and PIN_OPTIONAL):

const CONNECTION_STATE = {
  DISCONNECTED: 'DISCONNECTED',
  CONNECTING: 'CONNECTING',
  CONNECTED: 'CONNECTED',
  PIN_REQUIRED: 'PIN_REQUIRED',
  PIN_OPTIONAL: 'PIN_OPTIONAL',
  ERROR: 'ERROR'
}

Now we will modify handleSetup and change the state according with the PIN requirement:

const handleSetup = (localStream, pinStatus) => {
  setLocalStream(localStream);
  switch (pinStatus) {
    case 'none':
      pexRTC.connect();
      break;
    case 'required':
      setConnectionState(CONNECTION_STATE.PIN_REQUIRED);
      break;
    case 'optional':
      setConnectionState(CONNECTION_STATE.PIN_OPTIONAL);
      break;
    default:
      break;
  }
};

As you can see, this function receives two parameters. The first parameter is the localStream parameter that we have discussed in the previous tutorial. The second parameter is called pinStatus - and this is the one that we are interested in here.

The pinStatus parameter can have three different values:

  • none: When the PIN is not required (as was the case in the previous lesson).
  • required: When it's mandatory to use a PIN.
  • optional: When entering a PIN is only mandatory for some users. In this case, the host of the meeting should enter their PIN, but the guest users can join a waiting area without any PIN and wait until the host arrives.

If the pinStatus is not defined (default) we only update the localStream, but we don't do anything else. This will help us in a next tutorial (mute video).

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 CONNECTION_STATE.PIN_REQUIRED:
    component = <Pin onSubmit={ handleSetPin } required={true}/>;
    break;
  case CONNECTION_STATE.PIN_OPTIONAL:
    component = <Pin onSubmit={ handleSetPin } required={false}/>;
    break;
  ...
}

You will have noticed that we pass an additional property to the component called required. This propery 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) => {
  setConnectionState(CONNECTION_STATE.CONNECTING);
  pexRTC.connect(pin);
};

This function will change the connection state to CONNECTING and connects to the conference with the provided PIN.

Run the app​

Now you should create a conference with PIN and, once you try to enter in that meeting, you will see a new panel asking for it. If you enter the right PIN, you will go inside the meeting.

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