> For the complete documentation index, see [llms.txt](https://mile-hi-labs.gitbook.io/react-session/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mile-hi-labs.gitbook.io/react-session/quick-start.md).

# Quick Start

## Install

```
npm install @mile-hi-labs/react-session
```

## Session Provider

Add the following to your `app.jsx` file or near the top of your application.

```javascript
// app.jsx

import React from 'react';
import { storeProvider } from '@mile-hi-labs/react-data';
import { sessionProvider } from '@mile-hi-labs/react-session';
import * as Adapters from 'adapters';
import * as Serializers from 'serializers';
import * as Models from 'models';
import Router from 'router';

const apiDomain = 'https://library-api.milehilabs.dev';
const store = new Store({ apiDomain: apiDomain, adapters: Adapters, serializers: Serializers, models: Models });

const App = (props) => {

  return (
    <StoreProvider context={store}>
      <SessionProvider modelName='user' store={store}>
      	<Router />        
    	</SessionProvider>
  	</StoreProvider>
	)
}

export default App;
```

## Session Consumer

Then, you can access the session from any route or component like so:

```javascript
// components/bootstrap/navbar-wrapper.jsx

import React, { useEffect } from 'react';
import { withSession } from '@mile-hi-labs/react-session';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';

const NavBarWrapper = (props) => {
	const { session } = props;

	return (
			<Navbar collapseOnSelect expand='lg' bg='light' variant='light'>
			<Navbar.Brand href='/' className='mr-15'>Company Name</Navbar.Brand>
			<Nav className='ml-auto'>
				{session.isAuthenticated() ? (
					<Nav.Link className='nav-user'>
						<img src={session.user.photo} className='mr-15'/>
						<h6>{session.user.name}</h6>
					</Nav.Link>
				) : (
					<Fragment>
						<Nav.Link as={Link} to='/login'>Login</Nav.Link>
						<Nav.Link as={Link} to='/register'>Register</Nav.Link>
					</Fragment>
				)}
			</Nav>
		</Navbar>
	)
}

export default withSession(NavBarWrapper);
```

## Session Authentication

Then, login or register your user and pass the user's credentials to the session like so:

```javascript
// components/auth/login-form.jsx

import React, { useState } from 'react';
import { withSession } from '@mile-hi-labs/react-session';
import Axios from 'axios';
import Form from 'react-bootstrap/Form';

const LOGIN_URL = 'http://localhost:8080/auth/login';

const LoginForm = (props) => {
  const { session, nextAction } = props;
  const [ email, setEmail ] = useState('');
  const [ password, setPassword ] = useState('');
  const [ taskRunning, setTaskRunning ] = useState(false);


  // Methods
  const login = async () => {
    try {
    	setTaskRunning(true);
      let model = await Axios.post(LOGIN_URL, {email: email, password: password});
      await session.authenticate('admin', model);
      console.log('Login Succeeded!');
      nextAction();
    } catch(e) {
      console.log(e);
    } finally {
      setTaskRunning(false);
    }
  }


  // Render
  return (
    <Form onSubmit={e => e.preventDefault()}>
      <Form.Group controlId='email'>
        <Form.Label>Email Address</Form.Label>
        <Form.Control
          type='email'
          placeholder='redford@hollywood.com'
          value={email}
          onChange={e => setEmail(e.target.value)}
        />
      </Form.Group>

      <Form.Group controlId='email'>
        <Form.Label>Password</Form.Label>
        <Form.Control
          type='password'
          placeholder='••••••••'
          value={password}
          onChange={e => setPassword(e.target.value)}
        />
      </Form.Group>

      <Form.Group>
        <BasicButton
          title='Login'
          icon='chevron-right'
          taskRunning={taskRunning}
          onClick={() => login()}
        />
      </Form.Group>
    </Form>
  )
}

export default withSession(LoginForm);
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://mile-hi-labs.gitbook.io/react-session/quick-start.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.