studiokit-auth-js

studiokit-auth-js is an expansion on the studiokit-net-js library, adding authentication methods.

Installation
Usage
Development

Installation

Install this library and redux-saga as a dependency

yarn add studiokit-auth-js
Follow the setup instructions from studiokit-net-js

Add the authReducer into your reducers.js module

import { combineReducers } from 'redux'
import { reducers as authReducers } from 'studiokit-auth-js'

export default combineReducers({
	auth: authReducers.authReducer
})

Create services for tokenPersistenceService, ticketProviderService, and codeProviderService. The defaults do not return any results, but your services should most likely target AsyncStorage or LocalStorage and the window.location.search property. See src/services.ts for reference.

Update your rootSaga module to add authSaga with your OAuth client credentials and services, merge your app's endpointMappings with authEndpointMappings, and pass getOAuthToken into fetchSaga.

import { all } from 'redux-saga/effects'
import { sagas as netSagas } from 'studiokit-net-js'
import {
	sagas as authSagas,
	endpointMappings as authEndpointMappings,
	getOAuthToken,
	AUTH_ACTION
} from 'studiokit-auth-js'
import endpointMappings from 'endpointMappings'

export default function* rootSaga() {
	yield all({
		fetchSaga: netSagas.fetchSaga(
			_.merge(authEndpointMappings, endpointMappings),
			'https://yourapp.com',
			getOAuthToken
		),
		loginFlow: authSagas.authSaga(
			{
				client_id: 'id',
				client_secret: 'secret'
			},
			tokenPersistenceService,
			ticketProviderService,
			codeProviderService
		)
	})
}

Usage

Providers

Once you have the above steps completed, auth will be enabled. The ticketProviderService and codeProviderService should will used to handle auth redirects containing code or ticket query params.

Store

Once the auth is completed, it will live in the redux store at the auth key, i.e.

auth: {
	isInitialized: false,
	isAuthenticating: false,
	isAuthenticated: false,
	didFail: false
}

Initialization

The AUTH_INITIALIZED signal is sent when the authSaga has completed initialization and handled one of the following cases:

Loaded a saved token using the tokenPersistenceService
Exchanged a ticket for a token
Exchanged a code for a token
Initialized without a token, ready for an auth action to trigger

At the time of initialization, use the value in redux at auth.isAuthenticated to determine if a token was loaded or exchanged.

Manual Login

Alternately, you can dispatch manual auth actions to the store for login forms.

import { dispatchAction } from 'services/actionService'
import { AUTH_ACTION } from 'studiokit-auth-js'
.
.
.
dispatchAction(AUTH_ACTION.LOCAL_LOGIN_REQUESTED, {
	payload: {
		Username: 'joe',
		Password: 'joeRocks1!'
	}
})

Development

During development of this library, you can clone this project and use

yarn link

to make the module available to another project's node_modules on the same computer without having to publish to a repo and pull to the other project. In the other folder, you can use

yarn link studiokit-auth-js

to add studiokit-auth-js to the consuming project's node_modules

Build

Because this is a module, the source has to be transpiled to ES5 since the consuming project won't transpile anything in node_modules

yarn build

will transpile everything in /src to /lib. /lib/index.js is the entry point indicated in package.json

During development, you can run

yarn build:watch

and babel will rebuild the /lib folder when any file in /src changes.

When you commit, a commit hook will automatically regenerate /lib

Deploy

This packaged is deployed via the npm repository. Until we add commit hooks for deployment, it must be published via yarn publish

jkdufair/studiokit-auth-js