Liveart Stytch authentication

Liveart authentication package for Stytch implementation.

Installation

Use the npm package manager to install the package into the project.

npm install @liveart/auth

Initialization

Mobile

Run init function to initialize the the workplace (reducer, token storage etc).

import { init } from '@liveart/auth';
import * as Keychain from 'react-native-keychain';
import { store } from './store';

...

init({
  dispatch: store.dispatch,
  storage: Keychain,
  userServiceAddress: 'https://user-dev.liveart.ai',
})

WEB

Run init function to initialize the the workplace (reducer, token storage etc).

import { init } from '@liveart/auth';
import { store } from './store';

...

init({
  dispatch: store.dispatch,
  storage: localStorage,
  userServiceAddress: 'https://user-dev.liveart.ai',
})

Attach reducer and configure saga middleware

Reducer

Attach reducer to your store

import { stytchReducer } from '@liveart/auth';
import { combineReducers } from '@reduxjs/toolkit';

...

const rootReducer = combineReducers({
  ...
  stytch: stytchReducer,
  ...
});

Saga middleware

Attach saga to the saga middleware

import { stytchSaga, stytchSignOut } from '@liveart/auth';
import createSagaMiddleware from 'redux-saga';

...

const sagaMiddleware = createSagaMiddleware()
sagaMiddleware.run(function* () {
  yield all([
    ...
    stytchSaga(),
    ...
  ]);
});

Configure Store

Configure Redux store

import { configureStore } from '@reduxjs/toolkit';

...

const store = configureStore({
  ...
  middleware: (getDefaultMiddleware) => {
    return getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [getSoldArtworksByArtistId.toString()],
      },
    }).concat(sagaMiddleware);
  },
  ...
});

Usage/Examples

Current step

import { StytchStep, stytchStepSelector } from '@liveart/auth';

const stytchStep = useSelector(stytchStepSelector);

Email sign Up

import {
  StytchStep,
  stytchStepSelector,
  stytchEmailSignUp,
} from '@liveart/auth';

dispatch(
  stytchEmailSignUp({
    email: '<[email protected]>',
    name: {
      firstName: '<FIRST_NAME>',
      lastName: '<LAST_NAME>',
    },
    enableNewsletter: true,
    termsAccepted: true,
  }),
);

Email exchange code

Exchange the core (which is received via email) for the accessToken

import { stytchStepSelector } from '@liveart/auth';

dispatch(
  stytchEmailExchangeCode({
    code: '<CODE>',
    enableNewsletter: true,
    termsAccepted: true,
  }),
);

Apollo client

Create apollo client with the following configs

import { createApolloAuthenticationLink } from '@liveart/auth';

const client = new ApolloClient({
  uri: '<APOLLO URI>',
  link: createApolloAuthenticationLink(uri),
});