funador / react-auth-client Goto Github PK

View Code? Open in Web Editor NEW

268.0 17.0 89.0 1.7 MB

Social authentication with React and Express

Home Page: https://react-auth-twitter.netlify.com/

HTML 11.82% CSS 30.35% JavaScript 57.83%

react-auth-client's Introduction

React Social Authentication Client

Medium posts that detail this repo

Getting Started

git clone https://github.com/funador/react-auth-client.git
cd react-auth-client
npm i && HTTPS=true npm start

Because of Facebook, https is required. Even in development.

Facebook requires all apps interacting with their api (including those in development) to be served over https. This means you will need to run create-react-app in https mode. Plus set up certificates for your server. Go ahead and get yourself a cup of coffee. This could take a minute.

OS X

To add https to localhost follow these instructions.

You will also need to manually add the https certificate to Chrome as described here.

You may also need to open a seperate tab for https://localhost:8080 and accept the security warning before the client will push requests through.

Windows

Thanks to Le Gui PPF for providing the following instructions for setting up SSL locally on Windows:

"Hi thanks for the code ! I haven’t tried it yet cause I spent a whole day (hot minute huh !) figuring out how to generate proper ssl certificate with all Chrome requirements… for those who don’t want to lose their time => https://serverfault.com/a/850961 and add:

echo authorityKeyIdentifier=keyid,issuer
echo basicConstraints=CA:FALSE
echo keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment

to v3 req.

Hope that works for you Windows folks!

If you only want to use Twitter/Google/Github authentication (https is not required), follow the instructions in this branch

Client

Depending on your OS you will have to flag the HTTPS enviornment variable differently. Documentation for different operating systems is here.

Server

Follow the instructions in the server repo

Finally open https://localhost:3000

Deploy

Everything is set up to deploy to Netlify. You just need to npm run build on the client and deploy to netlify.

Issues

Something not working? Please open an issue

react-auth-client's People

Contributors

Stargazers

Watchers

Forkers

fulviocanducci fuqua2 riz1903 prabu1988 prithule stanley666 telenord machix leoxwebdev dontry joshleongrlhco zianke writetoalexander cs10-labs7-mbp miguelramosfdz shadrach-tayo survivant yash2503 codeshaurya goryszewskig hoyikxian sabarishv95 gundaja bluelabeldeveloper1 arnoldkouya mkurtay akasrai capppo kenneth-huang webdawe syedirfan7 usama-tahir weider86-zz hongthaipham nilportugues lakshmikanthhandzap vanphan2512 belgajohnpauldimaano otitoju zoxta christophrus angsm behnamgh tajpouria frdepiaggio rogerwschmidt fpli-mbr ridoansaleh chittawan subhamkp emmanuellar kalamell khm56 chaladev iamshaheenumar brandiw thanigaivel569 patbi ziedjabnoune ali1366 sethukumar0001 usternes waqasabbas jrsalasm zivanovicb hharzer oreoseenoevil crestock caesura10 charlsestan rolandawoda sandrabosk britisharmy gannagoodkevich noerbarri tobidcoder ccsjunio snavarros rizafr parinkothari hjkun77 juniormena quantum-adrenaline-1 kjub codevirtuoso21

react-auth-client's Issues

How can i fix it

How i can redirect to /home when login success with Facebook

When socket on provider Facebook with user info when login success with Facebook . How can I redirect to /home or private route in React. I am beginner in React js

net::ERR_CERT_AUTHORITY_INVALID

i make a react client to authentication with Openid / Facebook but have a error with HTTPS self ssl certificate . How can i fix it ? Thankyou

./node_modules/engine.io-client/lib/transports/polling-xhr.js.Request.create @ polling-xhr.js:265
Request @ polling-xhr.js:167
./node_modules/engine.io-client/lib/transports/polling-xhr.js.XHR.request @ polling-xhr.js:94
./node_modules/engine.io-client/lib/transports/polling-xhr.js.XHR.doPoll @ polling-xhr.js:124
./node_modules/engine.io-client/lib/transports/polling.js.Polling.poll @ polling.js:118
./node_modules/engine.io-client/lib/transports/polling.js.Polling.doOpen @ polling.js:63
./node_modules/engine.io-client/lib/transport.js.Transport.open @ transport.js:83
./node_modules/engine.io-client/lib/socket.js.Socket.open @ socket.js:248
Socket @ socket.js:121
Socket @ socket.js:28
./node_modules/socket.io-client/lib/manager.js.Manager.open.Manager.connect @ manager.js:226
(anonymous) @ manager.js:540
polling-xhr.js:265 GET https://localhost:4000/socket.io/?EIO=3&transport=polling&t=MTuEOt8 net::ERR_CERT_AUTHORITY_INVALID

RangeError: Invalid typed array length: -4095

Got stuck with the Error: RangeError: Invalid typed array length: -4095
Any idea?

Blank page after authentification

I'm trying to integrate you approach into my react app . I get the twitter authentication popup and it does seems to work correctly but after the authorization and the authentication the popup stuck in a blank page with this url :
127.0.0.1:8080/twitter/callback?oauth_token=xxx&oauth_verifier=xxx

Request tweets

Hi, i have managed to complete the authorisation stage of this tutorial, i guess this isnt really an issue but would like help or maybe help directing me to a site displaying how to fetch/request tweets once the callback has been executed and has been authorised/logged-in.

I have been on the twitter site and copied the code here : https://developer.twitter.com/en/docs/labs/tweets-and-users/quick-starts/get-tweets
and refactored to look like this on a separate twitter.js file to be imported into the App.js (App component). Heres my code:

///////////////////////////////////////start///////////////////////////////////////////////
tweet.js file

import React, { Component } from 'react';
const request = require('request');

const util = require('util')
const get= util.promisify(request.get);
const endpointURL = new URL('https://api.twitter.com/labs/1/tweets');

export default class Tweets extends Component {
state={
tweets:''
}
componentDidMount(){
async function getRequest(){
const params = {
ids: 'TLgXKh7bO0H_t9DeAAAq',
format: 'detailed',
};
const req = await get({url:endpointURL, qs: params, json:true, mode: 'cors'});
if( req.body ){
return req.body;

} else {
 console.log('not working working')
}

}

(async ()=>{
try{
const response = await getRequest();
console.log(response);
} catch(e){
console.error( e)
}
})();
}

render() {
return(

{el}

Didnt fetch

)
}
}

////////////////////////////////////////end//////////////////////////////////////////////

This is imported to the App.js file as such:

////////////////////////////////////////start//////////////////////////////////////////////
App.js fiile:

import React, { Component } from 'react'
import io from 'socket.io-client'
import OAuth from './OAuth'
import Loading from './Loading'
import Footer from './Footer'
import Tweets from './Tweets'
import { API_URL } from './config'
import './App.css'
const socket = io(API_URL) //,{transports: ['websocket']}
const providers = ['twitter', 'google', 'facebook', 'github']//import theese in because our auth controller needs to call our event for each provider which the event is named after the provider

export default class App extends Component {

state = {
loading: true
}

componentDidMount() {//check server and server route is working as created on server.js so to remove loading screen

socket.on('connect', function(){
  console.log('connected')
});

fetch(`${API_URL}/wake-up`)
  .then(res => {
    if (res.ok) {
      this.setState({loading: false})
    }
  })

}

render() {
const divStyles = {

}
const buttons = (providers, socket) =>
  providers.map(provider =>
    <OAuth
      provider={provider}
      key={provider}
      socket={socket}
    />
  )

return (
  <div className='wrapper'>
    <div className='container'>
      {this.state.loading
        ? <Loading />
        : buttons(providers, socket)
      }
    </div>

{
buttons
?
:

Hasnt fetched

}

)
}
}