Login components - React Native

Password component

The mobile Password component collects the user's password, which can be used as one factor (something you know) when accessing financial services.

Once you have installed and initialized Weavr React Native SDK, you can integrate the mobile Password Component.

To add:

import { SecurePasswordTextField } from "@weavr-io/secure-components-react-native";
const textFieldRef = useRef<any>();
//tag is only required for group actions
const [tagPass1, setTagPass1] = React.useState<string | undefined>();
<SecurePasswordTextField
  placeholder="Enter Password"
  style={styles.fieldBox} //only define sizing
  fontStyle={{
    fontFamily: "Lobster-Regular",
    fontSize: 16,
    color: "#8080cc",
  }}
  background={true} //here default behaviour is system default
  onCreateToken={onPassToken}
  onGetTag={(resp: any) => {
    console.log(resp);
    setTagPass1(resp.value);
  }}
  onTextChanges={(resp) => {
    console.log(resp);
  }}
  onFocus={(resp) => {
    console.log(resp);
  }}
  onBlur={(resp) => {
    console.log(resp);
  }}
  ref={textFieldRef}
  placeholderTextColor="#000000"
/>;

Create a token from the Text Field component:

textFieldRef.current.createToken();
//it receives the tokenized password
const onPassToken = (resp: any) => {
  console.log(resp);
  setPassword(resp.value);
  Toast.show(resp.value);
};

Set User Token in SDK:

import { setUserToken } from "@weavr-io/secure-components-react-native";
setUserToken(token).then((res: any) => {
  console.log(res);
});

Check if an association exists with the SDK:

import { isAssociated } from "@weavr-io/secure-components-react-native";
isAssociated().then((res) => {
  if (res) {
    //do your stuff
  } else {
    console.log("You must login first to continue!");
  }
});

Passcode component (EditText)

The mobile Passcode component collects the user's passcode, which can be used as one factor (something you know) when accessing financial services. If you are using Biometric Authentication, it is mandatory to use a passcode rather than a password, because it is used as a fallback input-method if biometry fails (e.g. a finger print is not recognized).

Once you have installed and initialized Weavr React Native SDK, you can integrate the mobile Passcode Component. This can be achieved either by importing the components directly using the code below:

import { SecurePasscodeTextField } from "@weavr-io/secure-components-react-native";
const textFieldRef = useRef<any>();
//tag is only required for group actions
const [tagPass1, setTagPass1] = React.useState<string | undefined>();
<SecurePasscodeTextField
  placeholder="Enter Passcode"
  style={styles.fieldBox} //only define sizing
  fontStyle={{
    fontFamily: "Lobster-Regular",
    fontSize: 16,
    color: "#8080cc",
  }}
  background={true} //here default behaviour is system default
  onCreateToken={onPassToken}
  onGetTag={(resp: any) => {
    console.log(resp);
    setTagPass1(resp.value);
  }}
  onTextChanges={(resp) => {
    console.log(resp);
  }}
  onBlur={(resp) => {
    console.log(resp);
  }}
  onFocus={(resp) => {
    console.log(resp);
  }}
  ref={textFieldRef}
  placeholderTextColor="#000000"
  onTextEntryComplete={() => {
    dLog("Text Entry completed");
  }}
  isSegmented={true} //mandatory if you want to use segmented fields
  //following props are for segmented passcode only
  placeholderTextColor="#808080"
  fieldBackgroundColor="#ffffff" //ios Only
  enableBorder={true}
  borderRadius={15}
  borderWidth={3}
  segmentSpacing={2}
  segmentHeight={60} //android only
  activeFieldBorderColor="#ff0000"
  inactiveFieldBorderColor="#00ffff"
/>;