Nascent Personality Manifestation

    @stytch/react-native
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.2 • Public • Published

    Stytch React Native SDK

    Dependencies

    The Stytch React Native SDK uses React v17+ and React Native v63+.

    Installation

    With npm npm install @stytch/react-native --save

    Documentation

    For full documentation please refer to Stytch's React Native SDK documentation.

    Example Usage

    Check out our example app here.

    Testing

    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.

    Typescript Support

    There are built in typescript definitions in the npm package.

    Keywords

    none

    Install

    npm i @stytch/react-native

    DownloadsWeekly Downloads

    22

    Version

    0.2.2

    License

    MIT

    Unpacked Size

    40.5 kB

    Total Files

    24

    Last publish

    Collaborators

    • cal-stytch
    • spencer-stytch
    • anmol-stytch
    • jeremy-stytch
    • austin-stytch
    • kaden-stytch
    • max-stytch
    • julianna-stytch
    • marygruen
    • reed-stytch
    • grace-stytch