How can i store token from facebook for successful login in react js?

2020-11-25 07:09 Abdul Rauf Khalid imported from Stackoverflow

Iam trying to implement login with facebook in my application the problem is i can see in the console that iam getting access token on correct facebook credentials but iam unable to store that token because of which login flow is not complete can anyone tell me about how can i store the token and complete user login.

import React, { Component } from "react";
import { EMAIL_REGEX } from "../../../common/constants/variables";
import IntlMessages from "../../../common/constants/IntlMessages";
// import Facebook from "./facebook";
import style from "../../../theme/style";
import FacebookLogin from "react-facebook-login";

export default class Comp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: "",
      emailError: "",
      passError: "",
      remember: true,
      isLoggedIn: false,
      userID: "",
      name: "",
      picture: ""
    };
  }

  submitLogin = async () => {
    const error = await this.checkLogin();
    if (error) {
      return;
    } else {
      const { password, email } = this.state;
      this.props.loginUser({ email, password });
    }
  };

  componentDidUpdate(prevProps, prevState) {
    if (prevProps.loginInfo != this.props.loginInfo) {
      if (!this.props.loginInfo.status) {
        this.props.alertPopUp({
          text: ["Incorrect Credentials are entered"],
          open: true,
          type: "error",
        });
      } else {
        this.props.toggleModal();
        this.props.authenticateUser(true);
      }
    }
  }
//facebook response function
  responseFacebook = response => {
     console.log(response.accessToken);

    this.setState({
      isLoggedIn: true,
      userID: response.userID,
      name: response.name,
      email: response.email,
      picture: response.picture.data.url
    });
  };

 componentClicked = (data) => {
    console.log("data", data);
  };

  checkLogin = () => {
    this.setState({
      emailError: "",
      passError: "",
    });
    let resolveBol = false;
    return new Promise((resolve, reject) => {
      if (this.state.email.length < 1) {
        this.setState({ emailError: "påkrævet" });
        resolveBol = true;
      }
      if (this.state.password.length < 1) {
        resolveBol = true;
        this.setState({ passError: "påkrævet" });
      }
      if (this.state.email.length > 1 && !EMAIL_REGEX.test(this.state.email)) {
        this.setState({ emailError: "Ugyldig e-mailadresse" });
        resolveBol = true;
      }
      resolve(resolveBol);
    });
  };
  render() {
    return (
      <React.Fragment>
        <div className="modal-col">
          <button
            type="button"
            className="close"
            onClick={() => this.props.toggleModal()}
          >
            <i className="fal fa-close"></i>
          </button>
          <h1>
            <IntlMessages id="login.heading" />
          </h1>
          <p>
            <IntlMessages id="login.detail" />
          </p>
          <div className="form">
            <div className="form-group">
              <input
                type="email"
                className="form-control"
                placeholder="Enter your Email"
                value={this.state.email}
                onChange={(e) => this.setState({ email: e.target.value })}
              />
              <span
                className={this.state.emailError.length > 0 ? "errorLogin" : ""}
              >
                {this.state.emailError}
              </span>
            </div>
            <div className="form-group">
              <input
                type="password"
                className="form-control"
                placeholder="Enter your Password"
                value={this.state.password}
                onChange={(e) => this.setState({ password: e.target.value })}
              />
              <span
                className={this.state.passError.length > 0 ? "errorLogin" : ""}
              >
                {this.state.passError}
              </span>
            </div>
            <div className="form-group clearfix">
              <div className="pull-left">
                <div className="custom-control custom-checkbox">
                  <input
                    type="checkbox"
                    className="custom-control-input"
                    id="customCheck"
                    name="example1"
                    checked={this.state.remember}
                    onChange={(e) =>
                      this.setState({ remember: e.target.checked })
                    }
                  />
                  <label className="custom-control-label" htmlFor="customCheck">
                    <IntlMessages id="login.remember.checkbox" />
                  </label>
                </div>
              </div>
              <div
                className="pull-right"
                style={style.link}
                onClick={() => {
                  this.props.toggleModal();
                  setTimeout(() => {
                    this.props.toggleForget();
                  }, 350);
                }}
              >
                <a className="forget-password">
                  <IntlMessages id="login.forget" />
                </a>
              </div>
            </div>
            <div className="form-group">
              <ul className="btn-list">
                <li className="w-50">
                  <button
                    className="w-100 bg-warning"
                    onClick={this.submitLogin}
                  >
                    <IntlMessages id="login.button" />
                  </button>
                </li>
                <li className="w-50">
                  // facebook login button comp
                  <FacebookLogin
                    appId="285970052812801"
                    autoLoad={false}
                    fields="name,email,picture"
                     onClick={this.componentClicked}
                    callback={this.responseFacebook}
                    cssClass="w-100 bg-info"
                  />
                </li>
              </ul>
            </div>
            <hr />
            <div className="form-group">
              <p>
                <IntlMessages id="login.detail.second" />
              </p>
              <a
                className="btn bg-light btn-default w-100"
                onClick={() => this.props.toggleUserSign()}
              >
                <IntlMessages id="login.create.user" />
              </a>
            </div>
          </div>
        </div>
      </React.Fragment>
    );
  }
}

See also questions close to this topic

To Use this.props in constructor of subclass in react ,we need to call super(props), Confused about this statement?
```
class MyComponent extends React.Component {    
constructor(props) {
    super()

    console.log(this.props)
    // -> undefined

    // Props parameter is still available
    console.log(props)
    // -> { icon: 'home', … }
}

render() {
    // No difference outside constructor
    console.log(this.props)
    // -> { icon: 'home', … }
}
```
} I saw the above code snippet in one answer but my doubt is about the confusion on (this), if we are calling using this it refers to the current instance of the class, so if we are passing the props to the subclass, then why we need to call explicitly super(props) not super() only, I am not able to get the exact reason after reading many answers ...Please explain in brief..I am a newbie in React..

The website gets stuck when I click next question

When I click the button my website stucks I dont know what is happening. I am using the while loop to not repeat the question in my quiz app. Help will be appreciated. The App and Questions function components are listed below. I am bringing my questions from an object array.

App.js

'''

import "./App.css";
import Questions from "./layout/Questions";

function App() {
  return (
    <div>
      <Questions />
    </div>
  );
}

export default App;


'''

Questions.js




import React, { useState } from "react";
import mcqs from "../data/mcqs";

const Questions = () => {
const handleButtonClick = () => {
 setquestionCounter(questionCounter + 1);
};
let randomQuestion = Math.floor(Math.random() * mcqs.length);
let [questionCounter, setquestionCounter] = useState(1);

if (questionCounter <= mcqs.length) {
 while (mcqs[randomQuestion].question === "999") {
   randomQuestion = Math.floor(Math.random() * mcqs.length);
 }
}
const string = mcqs[randomQuestion].question;
mcqs[randomQuestion].question = "999";
return (
 questionCounter <= mcqs.length && (
   <div className="questions">
     Q{questionCounter}:{string}
     <button onClick={handleButtonClick}>Next Question</button>
   </div>
 )
);
};

export default Questions;

how to create poll using API with react functional component

this is my react js code and I want to connect with my node js API but I don't understand how to that ...!

import React, { useState } from "react";
import Poll from "react-polls";
// import "./styles.css";

/**
 * https://stackoverflow.com/questions/65896319/react-js-class-poll-convert-into-react-hooks-poll
 */

// Declaring poll question and answers
const pollQuestion = "Youtube is the best place to learn ?";
const answers = [
  { option: "Yes", votes: 7 },
  { option: "No", votes: 2 },
  { option: "don't know", votes: 1 },
];

const Fakepolls = () => {
  // Setting answers to state to reload the component with each vote
  const [pollAnswers, setPollAnswers] = useState([...answers]);

  // Handling user vote
  // Increments the votes count of answer when the user votes
  const handleVote = (voteAnswer) => {
    setPollAnswers((pollAnswers) =>
      pollAnswers.map((answer) =>
        answer.option === voteAnswer
          ? {
              ...answer,
              votes: answer.votes + 1,
            }
          : answer
      )
    );
  };

  return (
    <div>
      <Poll
        noStorage
        question={pollQuestion}
        answers={pollAnswers}
        onVote={handleVote}
      />
    </div>
  );
};

export default function App() {
  return (
    <div className="App">
      <Fakepolls />
    </div>
  );
}

It work's fine with

// Declaring poll question and answers
    const pollQuestion = "Youtube is the best place to learn ?";
    const answers = [
      { option: "Yes", votes: 7 },
      { option: "No", votes: 2 },
      { option: "don't know", votes: 1 },
    ];

but I want to connect this poll with my API instead of Declaring it ..! this is my api- to get data -> ( router.get("/poll/:pollId", getPoll); //)

exports.getPoll = async (req, res, next) => {
  try {
    const { pollId } = req.params;
    const polls = await Poll.findById(pollId);
    if (!polls) throw new Error("no polls found");
    res.status(200).json(polls);
  } catch (error) {
    error.status = 400;
    next(error);
  }
};

This is a postman image -

and this API for POST data- and my node js code -

     exports.votes = async (req, res, next) => {
  try {
    /**
     * 1. get the poll from db
     * 2. check if the user already exists in any option
     * 3. if user has already selected any option do nothing
     * 4. if user has selected any other option remove from that option
     * 5. if user does not exist in any option, insert his user id to selected option
     */
    const { pollId } = req.params;
    let { userId, answer } = req.body;
    // get selected poll from db
    const poll = await Poll.findById(pollId);
    if (answer && poll) {
      answer = answer.toLowerCase();
      ///Finf the Poll

      let existingVote = null;
      Object.keys(poll.options).forEach((option) => {
        // loop on all options, check if the user already exists in any option
        if (poll.options[option].includes(userId)) {
          existingVote = option;
        }
      });
      if (existingVote == null) {
        // if there is no existing vote save it to db
        try {
          const push = {};
          push[`options.${answer}`] = userId;
          const update = await Poll.findByIdAndUpdate(
            pollId,
            { $push: push },
            { upsert: true }
          );
          res.status(201).json(update);
        } catch (err) {
          error.status = 400;
          next(error);
        }
      } else if (existingVote && existingVote.length > 0) {
        // check if answer is same as previous, if yes send not modified
        if (existingVote.toLowerCase() === answer.toLowerCase()) {
          res.status(304).send("Response already saved");
        } else {
          // delete the previous response and save it in new
          if (
            Array.isArray(poll.options[existingVote]) &&
            poll.options[existingVote].length > 0
          ) {
            // TODO: filtering this is not returning array but 1
            poll.options[existingVote] = poll.options[existingVote].filter(
              (vote) => vote != userId
            );
            poll.options[answer] = poll.options[answer].push(userId);
            const update = await Poll.findByIdAndUpdate(pollId, {
              $set: { options: poll.options },
            });
            res.status(201).json(update);
          }
        }
      } else {
        error = {
          status: 500,
          message: "Something went wrong",
        };
        next(error);
      }
    } else {
      error = {
        status: 404,
        message: "Poll not found",
      };
      next(error);
    }
  } catch (error) {
    error.status = 400;
    next(error);
  }
};

this is a POSTMAN image using POST to store data --- >

how can I connect API with react poll

Facebook API by attribution channel + source?

I am new to Facebook and I am currently using the attribution API. This is my request:

?ids=<BUSINESS_ID>&fields=conversion_events .filter_by({"ids":["<CONVERSION_EVENT_ID>"]}) .metric_scope({ "filters":{ "click_lookback_window":"2419200", "view_lookback_window":"86400", "visit_configuration":"include_paid_organic" }, "time_period":"last_thirty_days" }) {id,name,cost_per_1k_impressions,cost_per_click,cost_per_visit,net_media_cost,report_click_through_rate,report_clicks,report_impressions,report_visits,last_touch_convs,last_touch_convs_per_1k_impress,last_touch_convs_per_click,last_touch_convs_per_visit,last_touch_cpa,last_touch_revenue,last_touch_roas,total_conversions, metrics_breakdown .dimensions(["source_channel"]) {source_channel,cost_per_1k_impressions,cost_per_click,cost_per_visit,net_media_cost,report_click_through_rate,report_clicks,report_impressions,report_visits,last_touch_convs,last_touch_convs_per_1k_impress,last_touch_convs_per_click,last_touch_convs_per_visit,last_touch_cpa,last_touch_revenue,last_touch_roas} }

This is what I am getting as a response:

My issue is the source_channel parameter is an enum and correspond to one of those 5 channel listed bellow:

What I would like to have is a more detailed version of it which include source + channel such as the attribution present at https://business.facebook.com/attribution or bellow. Would it be possible to do that? Someone told me I may not be able to get those details with the API. If yes, do you have any example? I am really stuck, there is no drtails about that on https://developers.facebook.com/docs/marketing-api/attribution

Facebook Data deletion callback - What should I do with related user data?

We implemented Login with Facebook recently on our application. But in order for it to be in live mode, I need to provide Privacy policy URL, as well as Data Deletion Callback URL which deletes user data, or provides instructions how to do so, which ultimately leads to the same thing, deleting user data.

Users on our application can rent spaces, make reservations and pay for these reservations. We store and generate quite a lot of documents related to the business.

I am confused how to properly do this. What data do I exactly need to delete from the user that sends the request? I can't delete the whole user record, there are other tables rows that depend on it, which is important for the business.

From the users perspective, if he sends request for his data to be deleted, and later decides to click Login with Facebook button again, what behaviour should he expect? Does it need to be as if he registers for the first time?

Unable to Start Activity... android.content.res.Resources$NotFoundException: Drawable com.app: drawable/abc_vector_test with resource ID #0x7f07005c

I´m trying to do an App that works with Firebase and authenticates with Google, Email and Facebook.

Is exactly in the phase of Facebook sync that I had this problem:

E/AndroidRuntime: FATAL EXCEPTION: main
    Process: com.example.aplicacintrabajandoenlanube, PID: 8112
    java.lang.RuntimeException: Unable to start activity ComponentInfo{com.example.aplicacintrabajandoenlanube/com.example.aplicacintrabajandoenlanube.LoginActivity}: android.content.res.Resources$NotFoundException: Drawable com.example.aplicacintrabajandoenlanube:drawable/abc_vector_test with resource ID #0x7f07005c
        at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:3449)
        at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:3601)
        at android.app.servertransaction.LaunchActivityItem.execute(LaunchActivityItem.java:85)
        at android.app.servertransaction.TransactionExecutor.executeCallbacks(TransactionExecutor.java:135)
        at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:95)
        at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2066)
        at android.os.Handler.dispatchMessage(Handler.java:106)
        at android.os.Looper.loop(Looper.java:223)
        at android.app.ActivityThread.main(ActivityThread.java:7656)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:592)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:947)
     Caused by: android.content.res.Resources$NotFoundException: Drawable com.example.aplicacintrabajandoenlanube:drawable/abc_vector_test with resource ID #0x7f07005c
     Caused by: android.content.res.Resources$NotFoundException: File res/drawable/abc_vector_test.xml from drawable resource ID #0x7f07005c
        at android.content.res.ResourcesImpl.loadDrawableForCookie(ResourcesImpl.java:891)
        at android.content.res.ResourcesImpl.loadDrawable(ResourcesImpl.java:673)
        at android.content.res.Resources.loadDrawable(Resources.java:993)
        at android.content.res.Resources.getDrawableForDensity(Resources.java:983)
        at android.content.res.Resources.getDrawable(Resources.java:922)
        at android.content.Context.getDrawable(Context.java:693)
        at androidx.core.content.ContextCompat.getDrawable(ContextCompat.java:454)
        at androidx.appcompat.widget.ResourceManagerInternal.getDrawable(ResourceManagerInternal.java:144)
        at androidx.appcompat.widget.ResourceManagerInternal.getDrawable(ResourceManagerInternal.java:132)
        at androidx.appcompat.widget.ResourceManagerInternal.checkVectorDrawableSetup(ResourceManagerInternal.java:504)
        at androidx.appcompat.widget.ResourceManagerInternal.getDrawable(ResourceManagerInternal.java:137)
        at androidx.appcompat.widget.AppCompatDrawableManager.getDrawable(AppCompatDrawableManager.java:411)
        at androidx.appcompat.widget.TintTypedArray.getDrawableIfKnown(TintTypedArray.java:86)
        at androidx.appcompat.app.AppCompatDelegateImpl.attachToWindow(AppCompatDelegateImpl.java:647)
        at androidx.appcompat.app.AppCompatDelegateImpl.ensureWindow(AppCompatDelegateImpl.java:623)
        at androidx.appcompat.app.AppCompatDelegateImpl.onCreate(AppCompatDelegateImpl.java:350)
        at androidx.appcompat.app.AppCompatActivity.onCreate(AppCompatActivity.java:105)
        at com.example.aplicacintrabajandoenlanube.LoginActivity.onCreate(LoginActivity.java:23)
        at android.app.Activity.performCreate(Activity.java:8000)
        at android.app.Activity.performCreate(Activity.java:7984)
        at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1309)
        at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:3422)
        at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:3601)
        at android.app.servertransaction.LaunchActivityItem.execute(LaunchActivityItem.java:85)
        at android.app.servertransaction.TransactionExecutor.executeCallbacks(TransactionExecutor.java:135)
        at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:95)
        at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2066)
        at android.os.Handler.dispatchMessage(Handler.java:106)
        at android.os.Looper.loop(Looper.java:223)
        at android.app.ActivityThread.main(ActivityThread.java:7656)
E/AndroidRuntime:     at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:592)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:947)
     Caused by: android.content.res.Resources$NotFoundException: File res/drawable/abc_vector_test.xml from xml type drawable resource ID #0x7f07005c
        at android.content.res.ResourcesImpl.loadXmlResourceParser(ResourcesImpl.java:1264)
        at android.content.res.ResourcesImpl.loadXmlDrawable(ResourcesImpl.java:952)
        at android.content.res.ResourcesImpl.loadDrawableForCookie(ResourcesImpl.java:877)
            ... 32 more
     Caused by: java.io.FileNotFoundException: res/drawable/abc_vector_test.xml
        at android.content.res.AssetManager.nativeOpenXmlAsset(Native Method)
        at android.content.res.AssetManager.openXmlBlockAsset(AssetManager.java:1092)
        at android.content.res.ResourcesImpl.loadXmlResourceParser(ResourcesImpl.java:1248)
            ... 34 more

Just so U know, my Gradle has a folder that says 6.5, which I think is the versión of Gradle.

PS: I´m literally a starter, so I do not understand most of the things I´m doing and probably will do, so please, help me in the easiest way possible (hahahah)

Web login example with Firebase Realtime Database

I've problem with Firebase Realtime Database and website login. I don't understand how compare form data and Firebase data. For example, I want compare user password and form password? May you help us? Thank you!

While Login if password is wrong, want to render login.ejs instead of page that says "unauthorized" using passport-local-mongoose

I am trying to learn how to use passport, passport-local, passport-local-mongoose, express-session. What I want is when the password is incorrect, the login.ejs should be rendered. However, it is displaying a message, "unauthorized" instead rendering the login.ejs. I am not able to figure out where am I going wrong or where should I make changes so that the page renders login.ejs .

login.ejs (I have used bootstrap v5.0 for the form validation)

<%-include("partials/header.ejs")%>
<div class="sign-heading"><h1>Login</h1></div>
<div class="sign">
  <form action="/login" method="POST" class="needs-validation" novalidate>
    <div class="mb-3">
      <label for="InputUsername" class="form-label">Username</label>
      <% if (!exists) { %>
      <input type="text" class="form-control is-invalid" id="InputUsername" name="username" required>
      <div class="invalid-feedback">
        Wrong username and password.
      </div>
      <% }else{ %>
        <input type="text" class="form-control" id="InputUsername" name="username" required>
      <% } %> 
    </div>
    <div class="mb-3">
      <label for="InputPassword" class="form-label" >Password</label>
      <input type="password" class="form-control" id="InputPassword" name="password" required>
    </div>
    <div class="pb-3"></div>
    <button type="submit" class="btn btn-primary">Register</button>
  </form>
</div>
<%-include("partials/footer.ejs")%>

app.js

const bodyParser = require("body-parser");
const mongoose = require("mongoose");
const session=require("express-session");
const passport= require("passport");
const passportLocalMongoose=require("passport-local-mongoose");
const app=express();

app.use(bodyParser.urlencoded({extended:true}));
app.use(express.static(__dirname+"/public"));
app.set('view engine', 'ejs');

app.use(session({
    secret: 'This is my personal diary.',
    resave: false,
    saveUninitialized: false,
  }));

app.use(passport.initialize());
app.use(passport.session());

  mongoose.connect("mongodb://localhost:27017/diaryDB",{useNewUrlParser:true, useUnifiedTopology: true });
  mongoose.set("useCreateIndex",true);

  const entrySchema=new mongoose.Schema({
      title: String,
      body: String
  });
  const diarySchema=new mongoose.Schema({
      username:String,
      password:String,
      entry: [entrySchema]
  });
  
  diarySchema.plugin(passportLocalMongoose);

  const Entry=mongoose.model("Entry",entrySchema);
  const Diary=mongoose.model("Diary",diarySchema); 

  passport.use(Diary.createStrategy());

  passport.serializeUser(Diary.serializeUser());
  passport.deserializeUser(Diary.deserializeUser());

app.get("/",function(req, res){
    res.render("home",{});
});

app.get("/register",function(req, res){
    res.render("register",{exists:false});
});
app.post("/register", function(req, res){
    let username=req.body.username;
    let password=req.body.password;

    Diary.register({username:username},password,function(err,diary){
        if(err){
            res.render("register",{exists:true});
        }
        else{
            passport.authenticate("local")(req,res,function(){
                res.redirect("/diary/"+username);
            });
        }
    });
});


app.get("/login",function(req, res){
    res.render("login",{exists:true});
});

app.post("/login",function(req,res){
    let username=req.body.username;
    let password=req.body.password;

    Diary.findOne({username:username},function(err,diary){
        if(diary){
            req.login(diary,function(err){
                if(err){
                    console.log(err);
                    res.redirect("login",{exists:false});
                }
                else{
                         passport.authenticate("local")(req,res,function(){
                        res.redirect("/diary/"+diary.username);
                    });
                }
            });
        }else{
            res.render("login",{exists:false});
        }
    });
});

app.get("/diary/:customName",function(req, res){
    let customName=req.params.customName;
    if(req.isAuthenticated()){ 
        res.render("diary",{username:customName});
    }else{
        res.redirect("/login");
    }
});

app.get("/write",function(req, res){
    res.render("write",{});
});
app.get("/entry",function(req, res){
    res.render("entry",{});
});
app.get("/delete",function(req, res){});

app.get("/logout",function(req,res){
    req.logout();
    res.redirect("/");
});

app.listen(3000,function(){
    console.log("Server has started.");
});

Just the "/login"

app.get("/login",function(req, res){
    res.render("login",{exists:true});
});

app.post("/login",function(req,res){
    let username=req.body.username;
    let password=req.body.password;

    Diary.findOne({username:username},function(err,diary){
        if(diary){
            req.login(diary,function(err){
                if(err){
                    console.log(err);
                    res.redirect("login",{exists:false});
                }
                else{
                         passport.authenticate("local")(req,res,function(){
                        res.redirect("/diary/"+diary.username);
                    });
                }
            });
        }else{
            res.render("login",{exists:false});
        }
    });
});

Admin access to AWS console, but no access via CLI

I use a few different acounts and keep all the credentials in ~/.aws/credentials. CLI works fine on all other accounts, so it's not a configuration issue. The only taht works is aws sts get-caller-identity.

The strange thing is that I belong to the Administrator group (as does everyone for now) and none of us have CLI access, despite having access keys and full Admin permissions.

I though it's because of MFA, but I use another account with MFA just fine through CLI. There's also this policy on the account (but it doesn't look restrictive?):

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Action": [
        "iam:ListAccountAliases",
        "iam:ListUsers",
        "iam:GetAccountSummary",
        "iam:GetAccountPasswordPolicy"
      ],
      "Resource": "*",
      "Effect": "Allow",
      "Sid": "AllowAllUsersToListAccounts"
    },
    {
      "Action": [
        "iam:ChangePassword",
        "iam:CreateLoginProfile",
        "iam:DeleteLoginProfile",
        "iam:GetLoginProfile",
        "iam:ListAccessKeys",
        "iam:UpdateLoginProfile",
        "iam:ListSigningCertificates",
        "iam:ListSSHPublicKeys",
        "iam:GetSSHPublicKey",
        "iam:UploadSSHPublicKey",
        "iam:DeleteSSHPublicKey"
      ],
      "Resource": [
        "arn:aws:iam::____________:user/${aws:username}"
      ],
      "Effect": "Allow",
      "Sid": "AllowIndividualUserToSeeAndManageTheirOwnAccountInformation"
    },
    {
      "Action": [
        "iam:ListVirtualMFADevices",
        "iam:ListMFADevices"
      ],
      "Resource": [
        "arn:aws:iam::____________:mfa/*",
        "arn:aws:iam::____________:user/${aws:username}"
      ],
      "Effect": "Allow",
      "Sid": "AllowIndividualUserToListTheirOwnMFA"
    },
    {
      "Action": [
        "iam:CreateVirtualMFADevice",
        "iam:RequestSmsMfaRegistration",
        "iam:FinalizeSmsMfaRegistration",
        "iam:EnableMFADevice",
        "iam:ResyncMFADevice"
      ],
      "Resource": [
        "arn:aws:iam::____________:mfa/${aws:username}",
        "arn:aws:iam::____________:user/${aws:username}"
      ],
      "Effect": "Allow",
      "Sid": "AllowIndividualUserToManageTheirOwnMFA"
    }
  ]
}

What could it be?

Steps: WSO2 Identity Server + WSO2 API Manager = Many Steps
I'm trying to give security to my APIs using WSO2 API Manager. I could achieved the configuration of WSO2 Identity Server to use an LDAP server with some users and made WSO2 API Manager to use this Identity Server as Key Manager. My questions are:
1. How can I configure end user to access an API? It needs associate all the users to an application role?
2. The end users need to have two access token to access an API after the login page? One to authenticate in IS using (OAuth Client Key/OAuth Client Secret) and other to access the API in API Manager using (Consumer Client Id/Consumer Client Secret)?
3. Is there any tutorial explaining all this steps?

When I set observe: response in the http options, the .subscribe returns an undefined access_token. How to fix it?

These are the options set in the authentication service.

httpOptions2 = {
headers: new HttpHeaders({
  'Content-Type':  'application/json',
  'Access-Control-Allow-Origin': '*',   
  'Authorization': 'Bearer '+localStorage.getItem("access_token")
}),
observe : 'response' as 'response'};

However, the access_token always return undefined. If I remove the observe: response, it works fine. I need to use observe: response.

this.http.post(environment.getBaseAddress() +url+'/', data, this.httpOptions2).subscribe((data) =>  {
        localStorage.setItem("access_token", data['access_token']);
        this.router.navigateByUrl('first-time');
      }

Using Django, SimpleJWT checking User permission to show content belongs to his own company
I am using React(front), Django(server-side), Simple JWT for User Auth Model and Postgres DB.

Let me explain my model: Company owns many properties, and each company has multiple users. As a user logs in, I want them to see a list of properties that belongs to their own company. As the user selects any property from the list, I need to again check if the user has permission and then run the queries. I am currently using Simple JWT for authentication. As the user logs in, the backend generates Access and Refresh tokens. With every request sent from the user side, I am sending JWT access token. On the server side, I want to decode the token, look at what company user belongs to, filter queries accordingly and send the JsonResponse.

Here is my Company Model:
```
class Company(models.Model):
    owner = models.ForeignKey(settings.AUTH_USER_MODEL, related_name='company_user', on_delete=models.CASCADE, null=True)
    company_name = models.CharField(max_length=200, null=True)
    slug = models.SlugField(max_length=200, unique=True)   

    class Meta:
        ordering = ['name']

    def __str__(self):
        return self.name
```
Here is the property model:
```
class Property(models.Model):
    company = models.ForeignKey(Company, related_name='prop_company', null = True, on_delete=models.CASCADE)
    property_name = models.CharField(max_length=200, null=True)
    property_type = models.CharField(max_length=200, null=True)
   

    def __str__(self):
        return self.property_name 
```
Here is the property data
```
class PropertyData(models.Model):
    
    data = models.ForeignKey(Property, related_name='property_data', null = True, on_delete=models.CASCADE)
    lat = model.FloatField(null=True)
    long = model.FloatField(null=True)
```
How should I handle the JWT token in the backend and check which company user belongs to, run queries accordingly and then send a success message along with the filtered data?

Related questions

How can i store token from facebook for successful login in react js?

See also questions close to this topic