react-42-login

1.0.0 • Public • Published

XO code style Build Status

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 public
className string
style object
onSuccess function
onFailure function
clientId string
children node
route string
redirectUri string

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

Package Sidebar

Install

npm i react-42-login

Weekly Downloads

1

Version

1.0.0

License

MIT

Last publish

Collaborators

  • mrdotb