studiokit-auth-js
v3.0.2
Published
Authentication flow for Studio apps at Purdue
Downloads
50
Keywords
Readme
studiokit-auth-js
studiokit-auth-js is an expansion on the studiokit-net-js library, adding authentication methods.
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 yourreducers.js
moduleimport { combineReducers } from 'redux' import { reducers as authReducers } from 'studiokit-auth-js' export default combineReducers({ auth: authReducers.authReducer })
- Create services for
tokenPersistenceService
,ticketProviderService
, andcodeProviderService
. The defaults do not return any results, but your services should most likely target AsyncStorage or LocalStorage and thewindow.location.search
property. Seesrc/services.ts
for reference. - Update your
rootSaga
module to addauthSaga
with your OAuth client credentials and services, merge your app's endpointMappings withauthEndpointMappings
, and passgetOAuthToken
intofetchSaga
.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