Nearly Pooped Myself

    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

    Install

    npm i react-42-login

    DownloadsWeekly Downloads

    5

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • mrdotb