8base Auth Provider
The 8base Auth Provider library contains provider with authentication stateAuthProvider
Table of Contents
- [Properties](#properties)
- [Parameters](#parameters)
AuthProvider
Extends ComponentProvides access to the authentication state.
AuthContextProps
Authentication contextProperties
isAuthorized
boolean?authState
AuthState?setAuthState
function (AuthState): void?
withAuth
Hoc to pass auth state to the componentParameters
WrappedComponent
React$ComponentType<any>auth
AuthContextProps Auth state passed by the props.
Returns React$ComponentType<InputProps>
Usage
Simple Usage
import { AuthProvider, AuthConsumer } from '@8base/auth-provider';
<AuthProvider>
...
<AuthConsumer>
{
(auth: AuthContextProps) => (<div />)
}
</AuthConsumer>
...
</AuthProvider>
Usage with @8base/create-apollo-client, @8base/apollo-links and @8base/apollo-provider
import React, { Component } from 'react';
import { BatchHttpLink } from 'apollo-link-batch-http';
import { withAuth } from '@8base/auth-provider';
import { createApolloClient } from '@8base/create-apollo-client';
import { ApolloProvider } from '@8base/apollo-provider';
import { createAuthLink, fileUploadLink } from '@8base/apollo-links';
withAuth(
class extends Component {
getClient: Function;
constructor(props: AsyncApolloProviderProps) {
super(props);
this.getClient = createApolloClient({
links: [
fileUploadLink,
createAuthLink({
getAuthState: this.getAuthState,
getRefreshTokenParameters: this.getRefreshTokenParameters,
onAuthSuccess: this.onAuthSuccess,
onAuthError: this.onAuthError,
}),
new BatchHttpLink({ uri: process.env.REACT_APP_SERVER_URL }),
],
});
}
getRefreshTokenParameters = () => {
const { auth: { authState: { email, refreshToken }}} = this.props;
return { email, refreshToken };
}
onAuthSuccess = ({ refreshToken, idToken }) => {
const { auth: { setAuthState }} = this.props;
setAuthState({
idToken,
refreshToken,
});
}
onAuthError = (err) => {
const { auth: { setAuthState }} = this.props;
setAuthState({
idToken: '',
refreshToken: '',
});
}
getAuthState = () => {
const { auth: { authState: { idToken, organizationId, accountId }}} = this.props;
return {
idToken,
organizationId,
accountId,
};
}
render() {
const { children } = this.props;
return (
<ApolloProvider
getClient={ this.getClient }
uri={ process.env.REACT_APP_SERVER_URL }
>
{ ({ apolloClient, isLoading }) => (<div />) }
</ApolloProvider>
);
}
}
)