funador / react-auth-client Goto Github PK
View Code? Open in Web Editor NEWSocial authentication with React and Express
Home Page: https://react-auth-twitter.netlify.com/
Social authentication with React and Express
Home Page: https://react-auth-twitter.netlify.com/
i checked out the hosted project and it keeping saying Heroku is spinning up, one moment please... for ever
Hello @funador !!
where did you handle the twitter tokens and access_tokens?
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
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(
////////////////////////////////////////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
?
:
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
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.