Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@stytch/react-native
Advanced tools
With npm
npm install @stytch/react-native @stytch/react-native-inappbrowser-reborn --save
If your project uses a bare React Native workflow on iOS:
cd ios && pod install && cd ..
The Stytch React Native SDK uses React v17+ and React Native v63+.
The Biometrics product depends on iOS 13+ and Android 6+. We only support Class 3 biometric sensors on Android. If you are testing biometrics on an iOS simulator or Android emulator, please ensure you are using one of the following versions: iOS 13 or 14, Android 11 or below. This should not be an issue on physical devices.
For full documentation please refer to Stytch's React Native SDK documentation.
You can find migration guides for any breaking changes in between versions here.
Check out our example app here.
To test your integration of the Stytch React Native SDK, we recommend creating methods that take the StytchClient as a parameter when using the client to begin/complete authentication, and then stubbing the StytchClient when testing those methods.
For example, the following method uses the StytchClient to authenticate a magic link.
export const authenticate = (
token: string,
stytch: StytchClient,
onSuccess: (res: MagicLinksAuthenticateResponse) => void,
onFailure: () => void,
) => {
stytch.magicLinks
.authenticate(token, { session_duration_minutes: 60 })
.then((res) => {
onSuccess(res);
})
.catch((e) => {
onFailure();
});
};
In order to test that this method passes the response into the onSuccess
method, you could write the following test:
import { authenticate } from '../EMLAuthenticateScreen';
const mockStytchClient = {
magicLinks: {
authenticate: jest.fn(() => Promise.resolve({ user_id: 'abc-123' })),
},
};
describe('authenticate', () => {
it('returns data on success', async () => {
let userData;
await authenticate(
'mock_token',
mockStytchClient,
(res) => {
userData = res;
},
() => console.log('success'),
);
expect(userData.user_id).toBe('abc-123');
});
});
The above example asserts that your method handles a successful response as expected. You can use this system in order to test any potential successes (with Promise.resolve
in the mockStytchClient
) or failures (with Promise.reject
in the mockStytchClient
) that you might expect from Stytch.
If you need to exercise component functionality and cannot abstract the logic into it's own function, you can also create mock StytchClients and return them from the useStytch hook like this.
import { useStytch } from '@stytch/react-native';
import { MyComponent } from './MyComponent';
jest.mock('@stytch/react-native', () => ({
useStytch: jest.fn(),
}));
describe('MyComponent', () => {
it('Does something', () => {
const mockStytchClient = {
magicLinks: {
email: {
loginOrCreate: jest.fn(),
},
},
};
useStytch.mockReturnValue(mockStytchClient);
const component = renderer.create(<MyComponent />);
expect(mockStytchClient.magicLinks.email.loginOrCreate).toHaveBeenCalledWith('user@example.com');
});
});
The above example tests that the MyComponent
component calls the StytchClient
method magicLinks.email.loginOrCreate
with a specific input.
There are built in typescript definitions in the npm package.
Join the discussion, ask questions, and suggest new features in our Slack community!
Check out the Stytch Forum or email us at support@stytch.com.
FAQs
Stytch's official React Native Library
The npm package @stytch/react-native receives a total of 1,264 weekly downloads. As such, @stytch/react-native popularity was classified as popular.
We found that @stytch/react-native demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.