Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Client: undefined is not a function #26

Closed
salahbm opened this issue Jul 10, 2023 · 3 comments
Closed

Client: undefined is not a function #26

salahbm opened this issue Jul 10, 2023 · 3 comments

Comments

@salahbm
Copy link

salahbm commented Jul 10, 2023

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

image

@dagnelies
Copy link
Collaborator

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

@salahbm
Copy link
Author

salahbm commented Jul 10, 2023

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
Copy link
Collaborator

dagnelies commented Jul 10, 2023

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.

@salahbm salahbm closed this as completed Jul 11, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants