teste facebook

package.json

@@ -11,6 +11,7 @@
  "next": "latest",
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
+ "react-facebook-login": "^4.1.1",
  "react-google-login": "^5.2.2",
  "react-is": "^17.0.2",
  "styled-components": "^5.2.3"

pages/index.js

@@ -8,6 +8,7 @@ import {
 } from "../src/contexts/ExperienceContext";
 import React, { useContext, useEffect } from "react";
 import GoogleLogIn from "../src/components/GoogleLogIn";
+import Facebook from "../src/components/Facebook";
 
 function LogOnScreen() {
  return (
@@ -53,10 +54,15 @@ export default function Home(props) {
  content="etEJ5pGxXGSqGyGM_OOMKO4UWHWrkJQ2TqDxRcR2iwY"
  />
  </Head>
- {screenState === 0 ? (
+ {/* {screenState === 0 ? (
  <GoogleLogIn handleStatusLogged={handleStatusLogged} />
  ) : (
  <LogOnScreen />
+ )} */}
+ {screenState === 0 ? (
+ <Facebook handleStatusLogged={handleStatusLogged} />
+ ) : (
+ <LogOnScreen />
  )}
  </Background>
  </ExperienceProvider>

pages/quiz.js

@@ -207,6 +207,7 @@ export default function QuizPage(props) {
  pointsBarTypeOne={props.pointsBarTypeOne}
  pointsBarTypeTwo={props.pointsBarTypeTwo}
  pointsBarTypeTree={props.pointsBarTypeTree}
+ isLogged={props.isLogged}
  >
  <Background>
  <QuizContainer>
@@ -238,6 +239,7 @@ export const getServerSideProps = async (ctx) => {
  pointsBarTypeOne,
  pointsBarTypeTwo,
  pointsBarTypeTree,
+ isLogged,
  } = ctx.req.cookies;
  return {
  props: {
@@ -248,6 +250,7 @@ export const getServerSideProps = async (ctx) => {
  pointsBarTypeOne: Number(pointsBarTypeOne),
  pointsBarTypeTwo: Number(pointsBarTypeTwo),
  pointsBarTypeTree: Number(pointsBarTypeTree),
+ isLogged: Number(isLogged),
  },
  };
 };

src/components/Facebook/index.js

@@ -0,0 +1,73 @@
+import React, { Component, useContext, useEffect, useState } from "react";
+import FacebookLogin from "react-facebook-login";
+import { ExperienceContext } from "../../contexts/ExperienceContext";
+
+export default function Facebook({ handleStatusLogged }) {
+ const { handleIsLogged } = useContext(ExperienceContext);
+ const changeStatus = () => {
+ handleStatusLogged(1);
+ };
+
+ const [state, setState] = useState({
+ isLoggedIn: false,
+ userID: "",
+ name: "",
+ email: "",
+ picture: "",
+ });
+
+ useEffect(() => {}, []);
+
+ const responseFacebook = (response) => {
+ console.log(response);
+ setState({
+ // isLoggedIn: true,
+ userID: response.userID,
+ name: response.name,
+ email: response.email,
+ picture: response.picture.data.url,
+ });
+ handleIsLogged();
+ changeStatus();
+ };
+
+ const componentClicked = () => console.log("clicked");
+
+ const FbContent = (
+ <div
+ style={{
+ width: "400px",
+ margin: "auto",
+ background: "#f4f4f4",
+ padding: "20px",
+ }}
+ >
+ <img src={state.picture} alt={state.name} />
+ <h2>Welcome {state.name}</h2>
+ Email: {state.email}
+ </div>
+ );
+
+ return (
+ <>
+ {/* {state.isLoggedIn ? (
+ <FbContent />
+ ) : (
+ <FacebookLogin
+ appId="632902014369254"
+ //autoLoad={true}
+ fields="name,email,picture"
+ onClick={componentClicked}
+ callback={responseFacebook}
+ />
+ )} */}
+ <FacebookLogin
+ appId="632902014369254"
+ // autoLoad={true}
+ fields="name,email,picture"
+ onClick={componentClicked}
+ callback={responseFacebook}
+ />
+ </>
+ );
+}

yarn.lock

@@ -1732,6 +1732,11 @@ react-dom@^17.0.2:
  object-assign "^4.1.1"
  scheduler "^0.20.2"
 
+react-facebook-login@^4.1.1:
+ version "4.1.1"
+ resolved "https://registry.yarnpkg.com/react-facebook-login/-/react-facebook-login-4.1.1.tgz#005121236a6ac0dee02099976fb1a3265f9d633e"
+ integrity sha512-COnHEHlYGTKipz4963safFAK9PaNTcCiXfPXMS/yxo8El+/AJL5ye8kMJf23lKSSGGPgqFQuInskIHVqGqTvSw==
+
 react-google-login@^5.2.2:
  version "5.2.2"
  resolved "https://registry.yarnpkg.com/react-google-login/-/react-google-login-5.2.2.tgz#a20b46440c6c1610175ef75baf427118ff0e9859"