Development

React testing application

All the library source code lives in lib/ts. In order to work on new features or modify existing ones, it is a good idea to start the test application by running:

npm run start

This will run the static test application on http://localhost:3031

The test application entry point is test/react-test-app/src/App.js. It contains a NavBar that can be used to view different configuration of the widget:

• /auth?router=no-router => Base widget without using react-router-dom for routing.
• /auth => Base widget using react-router-dom for routing.
• /auth?theme=dark => Base widget with dark theme.
• /custom-supertokens-login => Custom route
• /dashboard => Uses SuperTokens.doesSessionExist to verify that a session exists, redirects to websiteBasePath (/auth) if there are no sessions.
• /custom/auth => Uses custom props onHandleSuccess, doesSessionExist, onHandleForgotPasswordClicked, onCallSignUpAPI for a custom frontend only signin/signup. This is useful for testing purpose, be careful when modifying this part, see the Testing Wiki
• /custom-theme => Custom theme used only to document making your own frontend section in the docs.

To watch lib/ts files changes, run in a new terminal:

npm run watch

Node server

Sometimes, you will need server interactions to test your changes. First start supertokens core (See Contributing guidelines to setup the core if not already done)

cd ../supertokens-root
./startTestingEnv --wait

In a new terminal, run

npm run server

which will run the test/server/index.js nodejs application.

Linter

We are using eslint for this application.

npm run lint

The linter accepts no errors! It is run by the pre-commit hook. Make sure to read the contributing guidelines from this repo to setup to pre-commit hook.

Linter rules ./lib/ts/.eslintrc.js: ESLint rules base was generated using legacy tslint file. It runs on lib/ts/**/*.ts and lib/ts/**/*.tsx.

• No console.log => use only for debugging, if you leave logs on purpose, use console.info.
• No any types, except in the form fields **/validators.ts files.
• No unused imports. Exception made for "React" and "jsx", which are used under the hoods even if not referenced directly in the files. Search for "varsIgnorePattern": "^React$|^jsx$" in lib/ts/.eslintrc.js file for more info.

Notes:

• The react-test-app linter has been disabled for the test application because it was clashing with the linter from the library.

Conflicting libraries

There is an issue with conflicting libraries when running the test application locally. It can also occur if trying to link this library (supertokens-auth-react) or the theme's library (supertokens-themes-react) locally to another repository for development purpose (example of supertokens-demo-react).

See https://stackoverflow.com/questions/56021112/react-hooks-in-react-library-giving-invalid-hook-call-error for more information.

In order to fix that issue:

Case 1: Fix for local development with test app (./test/react-test-app)

npm run link-dependencies

Case 2: Fix for testing linking to another repository (Example of supertokens-demo-react)

SRC=~/path/to/supertokens-demo-react npm run link-dependencies