Client: undefined is not a function

[salahbm]

Using passwordless-id/webauthn on the react native, however facing some problems. Fist was TextDecoder which I have fixed, but still there is one issue idk why:

import client from '@passwordless-id/webauthn';
const CreateCredentials = () => {
  const {loggedInUser} = useContext(UserLoggedInData);
  const isClientAvailable = client.isAvailable();
  //fetch data
  const credential = AsyncStorage.getItem('credential_');
  const challengeS = AsyncStorage.getItem('challenge_');

  // Registration

  const [isRegistered, setIsRegistered] = useState(false);
  const challenge =
    AsyncStorage.getItem('challenge_' + loggedInUser.username) || uuidv4();

  const checkIsRegistered = useCallback(async () => {
    setIsRegistered(
      !!AsyncStorage.getItem('credential_' + loggedInUser.username),
    );
  }, []);

  useEffect(() => {
    if (loggedInUser.username) {
      checkIsRegistered();
    }
  }, []);

  const register = useCallback(async () => {

    const res = await client.register(loggedInUser.username, challenge, {
      authenticatorType: 'auto',
      userVerification: 'required',
      timeout: 60000,
      attestation: false,
      debug: false,
    });
    console.log('====================================');
    console.log(res);
    console.log('====================================');
    AsyncStorage.setItem('username', loggedInUser.username);
    AsyncStorage.setItem(
      'credential_' + loggedInUser.username,
      parsed.credential.id,
    );
    AsyncStorage.setItem('challenge_' + loggedInUser.username, challenge);
    checkIsRegistered();
  }, []);

 ERROR  TypeError: undefined is not a function

This error is located at:
    in CreateCredentials

[dagnelies]

Dunno, The whole stacktrace isn't even readable. Perhaps "React Native" is missing some web APIs related to the WebAuthn protocol?

[salahbm]

Dunno, The whole stacktrace isn't even readable. Perhaps "React Native" is missing some web APIs related to the WebAuthn protocol?

I checked out web APIs which are fine... and; I converted jsx into tsx, so now I can see the problems where is says, where client and parsers are not defined:

Property 'isAvailable' does not exist on type '{ client: typeof import("c:/Users/salah/Documents/react-native/creal-wallet/node_modules/@passwordless-id/webauthn/dist/esm/client

There is the source code:

import client from '@passwordless-id/webauthn';

const CreateCredentials: FC = () => {
  const isClientAvailable = client.isAvailable();
  return()
}

However in importing it clearly shows it has been imported correctly:

(alias) const client: {
    client: typeof client;
    server: typeof server;
    parsers: typeof parsers;
    utils: typeof utils;
}
import client

PLs: let me know if u have hard time to understand the code, ill try to provide new ones...

[dagnelies]

FYI, in javascript import client from '@passwordless-id/webauthn'; is different than import { client } from '@passwordless-id/webauthn';

The first imports everything (client => {client, server, parsers, utils}, with "client" being a very misleading choice here) while the second one would only import the client part.