npm package: @hilma/auth-native
Description: Auth Native is an autentication package for react-native client applications.
Author: Yona Ben-Reuven
Latest version: 0.7.1
Deprecated: This package is no longer maintained and should not be used in new projects.

# Auth Native

Auth Native is an autentication package for react-native client applications.

- [Auth Native](#auth-native)
      - [Installation](#installation)
  - [Main exports:](#main-exports)
    - [AuthProvider - component](#authprovider---component)
    - [AuthProvider Props](#authprovider-props)
    - [Auth Properties](#auth-properties)
    - [Accessing the auth object:](#accessing-the-auth-object)
      - [via Context:](#via-context)
      - [via Refs:](#via-refs)
    - [Making http requests](#making-http-requests)
      - [Axios - new approach (recommended)](#axios---new-approach-recommended)
      - [superAuthFetch - old approach (not recommended)](#superauthfetch---old-approach-not-recommended)
    - [createPrivateNavigator - function](#createprivatenavigator---function)
      - [PrivateScreen:](#privatescreen)
      - [MultipleScreen:](#multiplescreen)
      - [HomeScreen:](#homescreen)
      - [PublicOnlyScreen:](#publiconlyscreen)
    - [UserProvider - component](#userprovider---component)
      - [UserProvider Props:](#userprovider-props)
      - [Accessing the user value:](#accessing-the-user-value)
        - [via Context:](#via-context-1)
        - [via Refs:](#via-refs-1)
    - [privatize - HOC (function)](#privatize---hoc-function)
    - [useKlskDhp - hook](#useklskdhp---hook)
    - [useRoleKeys - hook](#userolekeys---hook)

#### Installation

``` bash
npm install --save @hilma/auth-native @react-navigation/native @react-navigation/stack axios 

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view @react-native-async-storage/async-storage expo-app-loading
```

After installing for the first time a file named `variables.js` will be created in the root of your client application.
This file includes all the variables that the package needs to know about, such as the server uri in development and production. the default is `localhost:8080` . You can make any changes as needed.

## Main exports:

### AuthProvider - component

`AuthProvider` is the main component needed from this package. It includes all the logic and methods needed for your application. `AuhtProvider` is as wrapping component that uses context to pass all its logic to the rest of your application. Before implemetation, let's examine some of the logic in `AuthProvider` . There's an object stored in the component called `storage` . This object includes 5 fields, all of which are either a string or null: 

| key          | description                                                   |
| ------------ | ------------------------------------------------------------- |
| kl           | an encoded version of the role keys of the authenticated user |
| klo          | an encoded version of roleAccessConfig in config.json         |
| kloo         | a random string                                               |
| klk          | a random string                                               |
| access_token | the current users access token                                |

Most of the methods and properties stored in `AuthProvider` use this object in some way, whether it being for making fetch request, or showing certain components to the client

Let's look at an example of how to implement it:

__App.js:__

``` jsx
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { AuthProvider } from '@hilma/auth-native';

import Admin from './components/Admin';
import Client from './components/Client';

const RootStack = createStackNavigator();

const App = () => (
    <NavigationContainer>
        <AuthProvider>
            <RootStack.Navigator>
                <RootStack.Screen name="Admin" component={Admin} />
                <RootStack.Screen name="Client" component={Client} />
                <RootStack.Screen name="Login" component={Login} />
            </RootStack.Navigator>
        </AuthProvider>
    </NavigationContainer>
);

export default App;
```

If you want to make this shorter you can import `provide` from the `@hilma/tools` package:

``` jsx
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { AuthProvider } from '@hilma/auth-native';
import { provide } from '@hilma/tools';

import Admin from './components/Admin';
import Client from './components/Client';

const RootStack = createStackNavigator();

const App = () => (
    <RootStack.Navigator>
        <RootStack.Screen name="Admin" component={Admin} />
        <RootStack.Screen name="Client" component={Client} />
        <RootStack.Screen name="Login" component={Login} />
    </RootStack.Navigator>
);

export default provide(NavigationContainer, AuthProvider)(App);
```

### AuthProvider Props

| prop                 | type                   | required                                             | description                                                                                                                                                                                                                                                    | default                      |
| -------------------- | ---------------------- | ---------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |
| logoutOnUnauthorized | `boolean`              | false                                                | If true, when a fetch request is made via superAuthFetch and the user is unauthorized, the logout function will invoked                                                                                                                                        | false                        |
| fallback             | `JSX.Elemet`           | false                                                | When `AuthProvider` mounts it doesn't render its children until it fetchs from AsyncStorage, instead it will render the fallback                                                                                                                               | `<AppLoading />` from `expo` |
| accessTokenCookie    | `string`               | false (if your'e using loopback don't use this prop) | the key of your access token. make sure its the same in your server (in nestjs its in configuration.ts) every application should have a different key. make sure its not obvious that its the access token. make its similar to your other cookies like kloook | 'access_token'               |
| ref                  | `React.Ref<HilmaAuth>` | false                                                | If you want a reference to the auth object pass a ref. This will be explored later on                                                                                                                                                                          |                              |

### Auth Properties

Now let's look at whats included in the auth object:

| property        | type                                                                                                                                      | description                                                                                                                                                                                                                                                                                                             |
| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| kls             | `{ kl: string \| null; klo: string \| null; };`                                                                                           | includes the kl and klo stored in AsyncStorage. You will not need to access this property                                                                                                                                                                                                                               |
| setAuthItem     | `setAuthItem(key: keyof Storage, value: string): Promise<void>;`                                                                          | Sets the key value pair in AuthProvider and AsyncStorage                                                                                                                                                                                                                                                                |
| getAuthItem     | `getAuthItem(key: keyof Storage): string \| null;`                                                                                        | Returns the auth storage item                                                                                                                                                                                                                                                                                           |
| removeAuthItem  | `removeAuthItem(key: keyof Storage): Promise<void>;`                                                                                      | Removes the item from AuthProvider and AsyncStorage                                                                                                                                                                                                                                                                     |
| getAccessToken  | `getAccessToken(): string \| null;`                                                                                                       | Returns the acces token                                                                                                                                                                                                                                                                                                 |
| isAuthenticated | `boolean`                                                                                                                                 | If true, the user is authenticated                                                                                                                                                                                                                                                                                      |
| logout          | `logout(): Promise<void>;`                                                                                                                | Removes all storage in AuthProvider                                                                                                                                                                                                                                                                                     |
| superAuthFetch  | `superAuthFetch(input: RequestInfo, init?: RequestInit \| undefined): Promise<[any, any]>;`                                               | Will fetch from data from the server.  @param input the url. the apiUrl in variables.js will be used to make the request. @param init. @returns A Promise with the resloved value being a tuple of the response and the error (if one accured)                                                                          |
| login           | `login(input: string, body: Record<'password' \| 'username' \| 'email', string>): Promise<{ success: boolean; user?: any; msg?: any; }>;` | Log in function @param body The body you want to send to the server. example: { email: `hilma@gmail.com` , password: `somepassword` } @param input The login endpoint. Defaults to `/api/CustomUsers/elogin` @returns A Promise with the resolved value being an object: `{ success: boolean; user?: any; msg?: any; }` |
| interceptors    | `Record<'proxyAndHeadersId' | 'cookieHeadersId' | 'logoutId', number | null>`                                                             | an object that holds the ids of `Axios` interceptors                                                                                                                                                                                                                                                                    |

### Accessing the auth object:

Now let's see how we actually access all these properties. There are a few ways to access all these propeties:

#### via Context:

`AuthProvider` is mainly built on React's Context API which allows you to access a certain value in any part of an application. There are two ways to access via The Context API:

1. __Recommended:__ Each property has its own context object (kls: `KlsContext` , superAuthFetch: `SuperAuthFetchContext` , and so on...). Each one of these context objects also include a custom hook that returns the property (kls: `useKls` , superAuthFetch: `useSuperAuthFetch` , and so on...).

``` jsx
import { useSuperAuthFetch } from '@hilma/auth-native';

// in some functional component
const superAuthFetch = useSuperAuthFetch();
```

2. __Not Recommended:__ You can access the whole auth object via the `AuthContext` context object. You can also use the `useAuth` hook. __The reason this method is not recommended is because each time you access this context object, you are recieving the whole object. It is very unlikeky you'll need to access the whole abject. The performance of your application will drop significantly. So please use the first method.__

``` jsx
import { useAuth } from '@hilma/auth-native';

// in some functional component
const { superAuthFetch } = useAuth();
```

#### via Refs:

Another way you can access the auth object is via React's refs. This method is useful if you want to access auth outside of components, like in redux middleware or mobx.

``` jsx
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { AuthProvider, createAuthRef } from '@hilma/auth-native';

import Admin from './components/Admin';
import Client from './components/Client';

const RootStack = createStackNavigator();

export const authRef = createAuthRef();

const App = () => (
    <NavigationContainer>
        <AuthProvider ref={authRef}>
            <RootStack.Navigator>
                <RootStack.Screen name="Admin" component={Admin} />
                <RootStack.Screen name="Client" component={Client} />
                <RootStack.Screen name="Login" component={Login} />
            </RootStack.Navigator>
        </AuthProvider>
    </NavigationContainer>
);

export default App;
```

In the file where you use `AuthProvider` import `createAuthRef` , invoke the function. this returns a ref object. A ref object is an object that includes one property which is `current` . `current` holds the value stored in the ref object. In AuthProvider we use forwardRef's to pass the auth object to the provided ref. Now when you want to access the auth object you can export the ref and access the properties via authRef.current:

``` jsx
import { authRef } from './App';

class ErrorStore {
    async addError() {
        const [res, err] = await authRef.current.superAuthFetch('....');
    }
}
```

### Making http requests

An important part of an application is making requests to a server. The process of making a request with the `fetch` api provided by the browser is very limited and doesn't provide much customization. In this package there are two main ways you can make requests: `Axios` and `superAuthFetch`. Let's take a look at these methods:

before we get in to that, make sure in `variables.js` that your apiUrl is set to your server.

#### Axios - new approach (recommended)
`Axios` is a Promise based HTTP client for the browser and node.js. It's recommended that you read the docs first: https://github.com/axios/axios. `Axios` is a very simple package but it also comes with a lot of very useful features. The main feature we use in auth is interceptors. Interceptors can intercept requests or responses before they are handled by then or catch. That allows us to add some very useful functionality. There a three interceptors that we create in auth. their ids are stored in `AuthProvider` in the `interceptors` key so you can cancel them at any time (although there should be no reason to do so):

1. __proxyAndHeadersId:__ this interceptor adds before every request the proxy of the server so you don't have to write 'http://localhost:8080/...' every time, and it adds some basic headers to requests: 'Content-Type': 'application/json', 'Accept': 'application/json'.
2. __cookieHeadersId:__ this interceptor adds two headers to a request: 'Authorization', 'Cookie'. In a react native environment, there's no browser cookies so you need to store information in `AsyncStorage` and send them in every request in the `Cookie` header. 
3. __logoutId:__ this interceptor checks if the status code of a response is 401 (Unauthorized) and if so, dispatches the `logout` function. It also changes the default error given by `Axios`: the default error object thrown by `Axios` has a lot of fields that are not very useful and rarely needed. The error this interceptor throws has only the important stuff in it.

A very big benefit of using `Axios` over the next approach is that there is nothing special you need to import or do. Just use it as if noting has changed. It can be easily used in `mobx` or `redux`.

example:

```jsx
import Axios from 'axios';

const MyComp = () => {
    const [user, setUser] = useState(null);

    useEffetct(() => {
        (async () => {
            try {
                const res = await Axios.get('/api/users/1');
                setUser(res.data);
            } catch (error) {
                console.error(error);
            }
        })();
    }, [);
    
    return <div></div>;
}
```

#### superAuthFetch - old approach (not recommended)
This approach is based on the fetch API given by the browser. superAuthFetch is very similar to `fetch`: It calls fetch with the same parameters but instead of returning the default response object, it returns an array: The first item being the json response of the request, and the second item being the error of the request (if there was one). This function also adds default headers, logs out on 401 statuses, and adds cookie headers if your using it in a `Capacitor` environment, just like in `Axios`
Accessing `superAuthFetch`:
`superAuthFetch` is stored in `AuthProvider` and therefore can only be accessed thrhough its equivalent Context object or a ref object passed to `AuthProvider`. If you need a reminder, go back to the 'Accessing the auth object' section. In short, for using Context you have the `SuperAuthFetchContext` Context object, the `useSuperAuthFetch` hook that returns that object, and `withContext` from `@hilma/tools` for class components.

`useSuperAuthFetch` example:

```jsx
import { useSuperAuthFetch } from '@hilma/auth-native';

const MyComp = () => {
    const [user, setUser] = useState(null);
    
    const superAuthFetch = useSuperAuthFetch();
    
    useEffetct(() => {
        (async () => {
            const [res, err] = await superAuthFetch('/api/users/1');
            if (err) return console.error(err);
            setUser(res);
        })();
    }, [);
    
    return <div></div>;
}
```

### createPrivateNavigator - function

This function is based on `createStackNavigator` from `@react-navigation/stack` . If you are not familiar with `react-navigation` , go read the documentation first as this function is completely based on it: https://reactnavigation.org/docs/getting-started.

`createPrivateNavigator` returns a stack just like `createStackNavigator` but it includes 4 more types of screens similar to the `Screen` component. Let's go over them now (all the props of the `Screen` component also apply to these components):

__example:__
``` jsx
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { AuthProvider, createStackNavigator } from '@hilma/auth-native';

import Admin from './components/Admin';
import Client from './components/Client';
import Login from './components/Login';

const RootStack = createPrivateNavigator();

const App = () => (
    <NavigationContainer>
        <AuthProvider>
            <RootStack.Navigator>
                <RootStack.PrivateScreen name="Admin" redirectName="Client" component={Admin} />
                <RootStack.PrivateScreen name="Client" redirectName="Login" component={Client} />
                <RootStack.PublicOnlyScreen name="Login" redirectName="Admin" component={Login} />
            </RootStack.Navigator>
        </AuthProvider>
    </NavigationContainer>
);

export default App;
```

#### PrivateScreen: 

You would use this component if you want your component to only accessible when a user is logged in and authenticated.

__PrivateScreen Props__:

| prop              | type                       | required | description                                                                                              | default                                |
| ----------------- | -------------------------- | -------- | -------------------------------------------------------------------------------------------------------- | -------------------------------------- |
| componentName     | `string`                   | false    | if the user is authenticated and its roleAccessConfig includes this string you can access this component | the display name of the component prop |
| redirectComponent | `React.ComponentType<any>` | false    | if the client is not allowed to access the route then this component will be rendered instead            |                                        |
| redirectName      | `string`                   | false    | if the `redirectComponent` is not provided, this prop will be navigated to                               | "Login"                                |
__example:__
``` jsx
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { AuthProvider, createPrivateNavigator } from '@hilma/auth-native';

import Admin from './components/Admin';
import Client from './components/Client';
import Login from './components/Login';

const RootStack = createPrivateNavigator();

const App = () => (
    <NavigationContainer>
        <AuthProvider>
            <RootStack.Navigator>
                <RootStack.PrivateScreen name="Admin" redirectName="Login" component={Admin} />
                <RootStack.PrivateScreen name="Client" redirectName="Login" component={Client} />
                <RootStack.Screen name="Login" component={Login} />
            </RootStack.Navigator>
        </AuthProvider>
    </NavigationContainer>
);

export default App;
```

#### MultipleScreen: 

If you want components rendered under the same route name but render different components per role. For example: if we have 2 components: `TeacherSchedule` and `StudentSchedule` , now you want them to be rendered under the same route: `Schedule` , You want that when a user with a `Teacher` role is logged in, they will see the `TeacherSchedule` component and for a `Student` role, `StudentSchedule` . `MultipleScreen` was made just for this.

__MultipleScreen Props__: 

| prop              | type                                       | required | description                                                                                                                           | default |
| ----------------- | ------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| components        | `Record<string, React.ComponentType<any>>` | true     | an object where the key being the component name that appears in roleAccessConfig and the value the component that you want to render |         |
| redirectComponent | `React.ComponentType<any>`                 | false    | if the client is not allowed to access the route then this component will be rendered instead                                         |         |
| redirectName      | `string`                                   | false    | if the `redirectComponent` is not provided, this prop will be navigated to                                                            | "Login" |

__example:__
``` jsx
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { AuthProvider, createPrivateNavigator } from '@hilma/auth-native';

import TeacherSchedule from './components/TeacherSchedule';
import StudentSchedule from './components/StudentSchedule';
import TeacherClass from './components/TeacherClass';
import StudentClass from './components/StudentClass';
import Login from './components/Login';

const RootStack = createPrivateNavigator();

const App = () => (
    <NavigationContainer>
        <AuthProvider>
            <RootStack.Navigator>
                <RootStack.MultipleScreen name="Schedule" redirectName="Login" components={{ TeacherSchedule, StudentSchedule }} />
                <RootStack.MultipleScreen name="Class" redirectName="Login" components={{ TeacherClass, StudentClass }} />
                <RootStack.Screen name="Login" component={Login} />
            </RootStack.Navigator>
        </AuthProvider>
    </NavigationContainer>
);

export default App;
```

#### HomeScreen:

Similar to Multiple screen but instead of going to see if the component names are in the `components` in roleAccessConfig, it goes to `defaultHomePage` . This compnent is good if you want a main screen per role.

__HomeScreen Props__: 

| prop              | type                                       | required | description                                                                                                                           | default |
| ----------------- | ------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| components        | `Record<string, React.ComponentType<any>>` | true     | an object where the key being the component name that appears in roleAccessConfig and the value the component that you want to render |         |
| redirectComponent | `React.ComponentType<any>`                 | false    | if the client is not allowed to access the route then this component will be rendered instead                                         |         |
| redirectName      | `string`                                   | false    | if the `redirectComponent` is not provided, this prop will be navigated to                                                            | "Login" |
__example:__
``` jsx
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { AuthProvider, createPrivateNavigator } from '@hilma/auth-native';

import TeacherHome from './components/TeacherHome';
import StudentHome from './components/StudentHome';
import Login from './components/Login';

const RootStack = createPrivateNavigator();

const App = () => (
    <NavigationContainer>
        <AuthProvider>
            <RootStack.Navigator>
                <RootStack.HomeScreen name="Schedule" redirectName="Login" components={{ TeacherHome, StudentHome }} />
                <RootStack.Screen name="Login" component={Login} />
            </RootStack.Navigator>
        </AuthProvider>
    </NavigationContainer>
);

export default App;
```
#### PublicOnlyScreen:

When a user is authenticated, a `PrivateScreen` will be rendered and if not a regular `Screen` will be rendered.

__PublicOnlyScreen Props__: 

The props are the exact same as `PrivateScreen` .

__example:__
``` jsx
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { AuthProvider, createStackNavigator } from '@hilma/auth-native';

import Admin from './components/Admin';
import Login from './components/Login';

const RootStack = createPrivateNavigator();

const App = () => (
    <NavigationContainer>
        <AuthProvider>
            <RootStack.Navigator>
                <RootStack.PrivateScreen name="Admin" redirectName="Login" component={Admin} />
                <RootStack.PublicOnlyScreen name="Login" redirectName="Admin" component={Login} />
            </RootStack.Navigator>
        </AuthProvider>
    </NavigationContainer>
);

export default App;
```

### UserProvider - component

A very useful component if you would like to get a current authenticated user. What this component will do is the following: Each time your access token changes, a new request will be made. It is up to you to decide what that request is. The request will be made with `Axios`. When the request is completed, the response will be stored in the `UserContext` context object:

``` jsx
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { AuthProvider } from '@hilma/auth-native';

import Admin from './components/Admin';
import Client from './components/Client';

const RootStack = createStackNavigator();

const App = () => (
    <NavigationContainer>
        <AuthProvider>
            <UserProvider url="/api/users/getUser">
                <RootStack.Navigator>
                    <RootStack.Screen name="Admin" component={Admin} />
                    <RootStack.Screen name="Client" component={Client} />
                    <RootStack.Screen name="Login" component={Login} />
                </RootStack.Navigator>
            </UserProvider>
        </AuthProvider>
    </NavigationContainer>
);

export default App;
```

#### UserProvider Props:

| prop            | type                                       | required | description                                   | default |
| --------------- | ------------------------------------------ | -------- | --------------------------------------------- | ------- |
| url             | `string`                                   | ture     | The url that you want to make a request to    |         |
| config          | `AxiosRequestConfig`                       | false    | the request payload for `Axios`               |         |
| onFinish        | `onFinish?<U extends any>(user: U): void;` | false    | will be invoked with the response             |         |
| onNoAccessToken | `onNoAccessToken?(): void;`                | false    | will be invoked when there is no access token |         |
| onError         | `onError?(error: any): void;`              | false    | will be invoked when an error occurred        |         |
| ref             | `React.Ref<any>`                           | false    | will inject the user into the ref             |         |

#### Accessing the user value:

The way the user is stored is almost identical to the auth object:

##### via Context:

`UserProvider` is mainly built on React's Context API which allows you to access a certain value in any part of an application. You can use the `UserContext` context object however you want.

There is a custom hook that accesses the `UserContext` value: `useUser`:

``` jsx
import { useUser } from '@hilma/auth-native';

// in some functional component
const user = useUser();
```

There is also a HOC that can pass the user via props called `withUser`:

```jsx
import React, { Component } from 'react';
import { withUser } from '@hilma/auth-native';

class MyComp extends Component {
    render() {
        <div>{this.props.user}</div>
    }
}

export default withUser(MyComp);
```

##### via Refs:

Another way you can access the user object is via React's refs. This method is useful if you want to access auth outside of components, like in redux middleware or mobx stores.

``` jsx
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { AuthProvider, createUserRef } from '@hilma/auth-native';

import Admin from './components/Admin';
import Client from './components/Client';

const RootStack = createStackNavigator();

export const userRef = createUserRef();

const App = () => (
    <Router>
        <AuthProvider>
            <UserProvider url="/api/users/getUser" ref={userRef}>
                <RootStack.Navigator>
                    <RootStack.Screen name="Admin" component={Admin} />
                    <RootStack.Screen name="Client" component={Client} />
                    <RootStack.Screen name="Login" component={Login} />
                </RootStack.Navigator>
            </UserProvider>
        </AuthProvider>
    </Router>
);

export default App;
```

In the file where you use `UserProvider` import `createUserRef` , invoke the function. this returns a ref object. A ref object is an object that includes one property which is `current` . `current` holds the value stored in the ref object. In UserProvider we use forwardRef's to pass the user value to the provided ref. Now when you want to access the auth object you can export the ref and access the properties via userRef.current:

``` jsx
import { userRef } from './App';

class ErrorStore {
    async addError() {
        const id = userRef.current.id;
        ///....
    }
}
```

### privatize - HOC (function)

A HOC that renders a component only if the user is authenticated and the component is in roleAccessConfig. If the component is not in roleaccessconfig then nothing is rendered. 

__privatize params:__

| param            | type                       | required | description                                                    | default      |
| ---------------- | -------------------------- | -------- | -------------------------------------------------------------- | ------------ |
| Component        | `React.ComponentType<P>`   | ture     | The Component you want to privatize                            |              |
| componentName    | `string`                   | true     | The component's name to look up in roleaccessconfig            |              |
| DefaultComponent | `React.ComponentType<any>` | false    | The component that's rendered if you cant access the component | `() => null` |

__example:__ 

```jsx
import React from 'react';
import { privatize } from '@hilma/auth-native';

const MyComp = () => {
    return <div>Im private</div>;
}

export default privatize(MyComp);
```

```jsx
import React from 'react';
import MyComp from './MyComp';

const App = () => {
    // will only be rendered if the name is in roleaccessconfig
    return <div><MyComp /></div>;
}

export default App;
```

### useKlskDhp - hook
```jsx
import { useKlskDhp } from '@hilma/auth-native';

// in some functional component
const klskDhp = useKlskDhp();
```
use this hook if you want to know the current roleaccessconfig thats decoded. this is more part of the private api but you can still use it.

the hook returns an object. here are the key value pairs:

| key  | type       | description                                               |
| ---- | ---------- | --------------------------------------------------------- |
| klsk | `string[]` | this represents the components from roleaccessconfig      |
| dhp  | `string`   | this represents the defaultHomePage from roleaccessconfig |

### useRoleKeys - hook
```jsx
import { useRoleKeys } from '@hilma/auth-native';

// in some functional component
const roleKeys = useRoleKeys();
```
use this hook if you want to get the decoded version of the `kl` cookie.

the hook returns an array of strings.