react-42-login

react-42-login

A 42 oauth Sign-in / Log-in Component for React

Install

$ npm install --save react-42-login

Or using yarn

$ yarn add react-42-login

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import Login42 from 'react-42-login';

const log = response => console.log(response);

ReactDOM.render(
	<Login42
		clientId='32d8c81b2811daae6720ab63df02b602eb812cde9d458bf5e56532cebbad1ce3'
		onFailure={log}
		onSuccess={log}
		route="/api42"
		redirectUri="http://localhost:3000"
		>
		42
	</Login42>,
	document.getElementById('root')
);

Because it's a oauth login we need to send the request from the server to keep the app secret safe.

// server side nodejs
app.post('/api42', (req, res) => {
	got.post('https://api.intra.42.fr/oauth/token', {
		json: true,
		body: {
			grant_type: 'authorization_code',
			client_id: uid,
			client_secret: '4c70ec76e04e0f89c8f04d6a204b1b1ef5e21861e502b8831d7413870c2e17a3',
			code: req.body.code,
			redirect_uri: req.body.redirect_uri
		}
	.then(apiRes => {
		// the previous request give us the acces_token
		// apiRes.body === { access_token: '6e1c10c1b37e1b495d03b5e5e0d76c31d0e577a66e6f9aed166cdda9b365733c' ... }
		// Now we can request user info with the token
		return got('https://api.intra.42.fr/v2/me', {
			methods: 'GET',
			json: true,
			headers: {Authorization: `Bearer ${apiRes.body.access_token}`}
		});
	})
	.then(apiRes => {
		// onSuccess get the user info
		res.json(apiRes.body);
	})
	.catch(err => res.json(err));
});

If you are not using nodejs you have to setup a route who's going to call the api.

First POST https://api.intra.42.fr/oauth/token With this body

body: {
	grant_type: 'authorization_code',
	client_id: your_app_id,
	client_secret: your_app_secret,
	code: from_previous_body_code,
	redirect_uri: from_previous_body_redirect_uri
}

Then GET https://api.intra.42.fr/v2/me With this header

headers: {Authorization: "Bearer " + from_previous_call_access_token}

Parameters

params	type	required	default
scope	string	:x:	public
className	string	:x:
style	object	:x:
onSuccess	function	:white_check_mark:
onFailure	function	:white_check_mark:
clientId	string	:white_check_mark:
children	node	:white_check_mark:
route	string	:white_check_mark:
redirectUri	string	:white_check_mark:

Demo

You can check the demo.

$ git clone https://github.com/MRdotB/react-42-login
$ yarn or npm i
$ yarn start or npm run start

License

MIT © mrdotb