React Admin with OpenID Connect - react-admin

Question

I'm trying to implement a simple OpenID Connect react-admin login using gitlab as OAuth2 service provider.
most of the react-admin examples about OpenID is simple username/password login. But OpenID Connect will do several redirects, and what I come with is make python/flask server redirect to http://example.com/#/login?token=<token>, and make react-admin to parsed the URL, and set token in localStorage.
basically is somethings like below:
(({ theme, location, userLogin } ) => {
let params = queryString.parse(location.search);
if (params.token) {
userLogin({token: params.token});
}
return (
<MuiThemeProvider theme={ theme }>
<Button href={ '/api/gitlab/login' }>
Login via GitLab
</Button>
</MuiThemeProvider>
);
});
Obviously, that is not good enough, I want to have some advice about how can I improve this?

Answer 1

I assume you followed this example https://marmelab.com/react-admin/Authentication.html, that does not cover the OAuth2 password grant.
// in src/authProvider.js
import { AUTH_LOGIN } from 'react-admin';
export default (type, params) => {
if (type === AUTH_LOGIN) {
const { username, password } = params;
const request = new Request('https://mydomain.example.com/authenticate', {
method: 'POST',
body: JSON.stringify({ username, password }),
headers: new Headers({ 'Content-Type': 'application/json' }),
})
return fetch(request)
.then(response => {
if (response.status < 200 || response.status >= 300) {
throw new Error(response.statusText);
}
return response.json();
})
.then(({ token }) => {
localStorage.setItem('token', token);
});
}
return Promise.resolve();
}
The GitLab guys / girls describe what grants they provide.
https://docs.gitlab.com/ee/api/oauth2.html#resource-owner-password-credentials-flow
Here is the example how you can get an access token using curl:
echo 'grant_type=password&username=<your_username>&password=<your_password>' > auth.txt
curl --data "#auth.txt" --request POST https://gitlab.com/oauth/token
With the access token you can get some information from the user that is also described here: https://docs.gitlab.com/ee/api/oauth2.html#access-gitlab-api-with-access-token
Here is the example how you can get information from GitLab with the access token that you got from the previous call using curl:
curl --header "Authorization: Bearer OAUTH-TOKEN" https://gitlab.com/api/v4/user
With some small adjustments in the react-admin example you can use the password credentials flow.
Here you can find the example that works with GitLab:
https://gist.github.com/rilleralle/b28574ec1c4cfe10ec7b05809514344b
import { AUTH_LOGIN } from 'react-admin';
export default (type, params) => {
if (type === AUTH_LOGIN) {
const { username, password } = params;
const oAuthParams = {
grant_type: "password",
username,
password
}
const body = Object.keys(oAuthParams).map((key) => {
return encodeURIComponent(key) + '=' + encodeURIComponent(oAuthParams[key]);
}).join('&');
const request = new Request('https://gitlab.com/oauth/token', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
},
body
})
return fetch(request)
.then(response => {
if (response.status < 200 || response.status >= 300) {
throw new Error(response.statusText);
}
return response.json();
})
.then(( {access_token} ) => {
localStorage.setItem('token', access_token);
});
}
return Promise.resolve();
}
I hope this helps you.
Cheers
Ralf

Answer 2

Here an good example using oauth flow in react-admin auth provider:
https://github.com/marmelab/ra-example-oauth/blob/master/app/src/authProvider.js