# react-42-login

> A React Component for 42 Login.

Latest version **1.0.0** (published 2017-01-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-42-login
pnpm add react-42-login
yarn add react-42-login
bun add react-42-login
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2017-01-22 |
| First published | 2016-12-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | mrdotb |
| Maintainers | mrdotb |
| Keywords | react, reactjs, react-component, 42-login, 42-oAuth |

## Links

- npm: https://www.npmjs.com/package/react-42-login
- Repository: https://github.com/mrdotb/react-42-login
- Homepage: https://github.com/mrdotb/react-42-login#readme
- Issues: https://github.com/mrdotb/react-42-login/issues
- npm.io page: https://npm.io/package/react-42-login

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^15.4.1
- [object-keys](https://npm.io/package/object-keys.md) ^1.0.11
- [query-string](https://npm.io/package/query-string.md) ^4.2.3
- [whatwg-fetch](https://npm.io/package/whatwg-fetch.md) ^2.0.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2017-01-22
- 0.0.0 — 2016-12-23

## README

[![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/sindresorhus/xo) [![Build Status](https://travis-ci.org/MRdotB/react-42-login.svg?branch=master)](https://travis-ci.org/mrdotb/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](https://yarnpkg.com/)
```
$ yarn add react-42-login
```


## Usage

```js
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](http://www.ibm.com/developerworks/library/wa-oauthsupport/ThreeLeggedOAuthDance.gif) login we need to send the request from the **server** to keep the app secret safe.
```js
// 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
```js
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
```js
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](https://github.com/mrdotb)

---
_Source: https://npm.io/package/react-42-login · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._