Skip to content

Update admin authentification #295

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Simperfit merged 3 commits into from
Oct 10, 2017
Merged

Update admin authentification #295

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
64078b5
Update admin authentification
pierre-H Sep 28, 2017
541d51d
Add window.location.replace('/');
pierre-H Oct 9, 2017
730bffd
JSON authentification instead of form data
pierre-H Oct 10, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 59 additions & 17 deletions admin/authentication-support.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,15 @@ export default (type, params) => {
switch (type) {
case AUTH_LOGIN:
const { username, password } = params;
const request = new Request(`${entrypoint}/login_check`, {
method: 'POST',
body: JSON.stringify({ email: username, password }),
headers: new Headers({ 'Content-Type': 'application/json' }),
const request = new Request(`${API_ENTRYPOINT}/login`, {
body: JSON.stringify({
username: params.username,
password: params.password,
}),
headers: new Headers({
'Content-Type': 'application/json',
}),
method: 'POST',
});

return fetch(request)
Expand All @@ -29,6 +34,7 @@ export default (type, params) => {
})
.then(({ token }) => {
localStorage.setItem('token', token); // The JWT token is stored in the browser's local storage
window.location.replace('/');
});

case AUTH_LOGOUT:
Expand All @@ -52,24 +58,60 @@ export default (type, params) => {
Then, configure the `Admin` component to use the authentication client we just created:

```javascript
import React, { Component } from 'react';
import { HydraAdmin, hydraClient, fetchHydra } from 'api-platform-admin';
import React from 'react';
import parseHydraDocumentation from 'api-doc-parser/lib/hydra/parseHydraDocumentation';
import { HydraAdmin, hydraClient, fetchHydra as baseFetchHydra } from '@api-platform/admin';
import authClient from './authClient';
import { Redirect } from 'react-router-dom';

const entrypoint = 'https://demo.api-platform.com';

const fetchWithAuth = (url, options = {}) => {
if (!options.headers) options.headers = new Headers({ Accept: 'application/ld+json' });
const entrypoint = 'https://demo.api-platform.com'; // Change this by your own entrypoint

options.headers.set('Authorization', `Bearer ${localStorage.getItem('token')}`);
return fetchHydra(url, options);
const fetchHeaders = {
'Authorization': `Bearer ${window.localStorage.getItem('token')}`,
};

class Admin extends Component {
render() {
return <HydraAdmin entrypoint={entrypoint} restClient={hydraClient(entrypoint, fetchWithAuth)} authClient={authClient}/>
}
}
const fetchHydra = (url, options = {}) => baseFetchHydra(url, {
...options,
headers: new Headers(fetchHeaders),
});

const restClient = api => hydraClient(api, fetchHydra);

const apiDocumentationParser = entrypoint => parseHydraDocumentation(entrypoint, { headers: new Headers(fetchHeaders) })
Copy link
Member

@soyuka soyuka Sep 28, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We really should not need this :p. maybe we can pass headers to the react component?

Copy link
Member

@mysiar mysiar Sep 28, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would rather keep it simplest so anybody can implement their own login and authentication with api. I use token passed in header to backend

.then(
({ api }) => ({ api }),
(result) => {
switch (result.status) {
case 401:
return Promise.resolve({
api: result.api,
customRoutes: [
{
props: {
path: '/',
render: () => (
<Redirect to={`/login`}/>
),
},
},
],
});

default:
return Promise.reject(result);
}
},
)
;

export default props => (
<HydraAdmin
apiDocumentationParser={apiDocumentationParser}
authClient={authClient}
entrypoint={entrypoint}
restClient={restClient}
/>
);

export default Admin;
```
Expand Down