Pow assent data

What data are you pulling and how? If this is a custom setup, can you share some code?

Sure!

The data for github is pulled via graphql and react:

app.js

import '../css/app.scss'

import 'phoenix_html'

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import Root from './Root'

import {$,jQuery} from 'jquery';
// export for others scripts to use
window.$ = $;
window.jQuery = jQuery;

import 'bootstrap';

import ApolloClient from "apollo-boost";
import {ApolloProvider} from 'react-apollo';

const api_client = new ApolloClient({
    uri: "https://api.github.com/graphql",
    request: async operation => {
        operation.setContext({
            headers: {
                // authorization: `token ${process.env.REACT_APP_GITHUB_TOKEN}`
                authorization: `token 142993ee80d11d6bec8b4089d8cc3b1b28cc0df0`
            }
        });
    }
})

ReactDOM.render(
<ApolloProvider client={api_client}>
    <Root />
</ApolloProvider>, 
document.getElementById('react-app'))

GithubStreamContainer.jsx

import React, { Component } from "react";
import gql from "graphql-tag";
import {Query} from "react-apollo";

import GithubStream from "./GithubStream";

const REPOSITORIES = gql`
{
  viewer{
      following(first: 20) {
      totalCount
        edges {
          node {
            url
            name
            isHireable
            
            repositories(first: 2, orderBy:{field: UPDATED_AT, direction: DESC}){
              edges {
                node {
                  name
                  updatedAt
                  url
                }
              }
            }
            
            starredRepositories(first: 2, orderBy:{field:STARRED_AT, direction: DESC}) {
              edges {
                starredAt
                node {
                  name
                  url
                }
              }
            }
            
            
            watching(first: 2, orderBy:{field:UPDATED_AT, direction: DESC}) {
              edges {
                node {
                  name
                  url
                }
              }
            }
          }
          cursor
        }
        pageInfo {
          hasNextPage
        }
    }
  }
}
`; 

class GithubStreamContainer extends Component {
    constructor(props) {
        super(props);

        this.state = {
            user: {}
        }

    }
    render() {
        return (
            <div>
                <Query query={REPOSITORIES}>
                    {({loading, error, data}) => {
                        console.log("loading", loading)
                        console.log("error", error)
                        console.log("data", data)
                        if(loading) return(<span>Loading...</span>);
                        if(error) return(<span>Error</span>);
                        return(
                          <div class="github-data">
                            <GithubStream data={data.viewer}/>
                          </div>
                        )
                    }}
                </Query>
            </div>
        );
    }
}

export default GithubStreamContainer;

Twitter:

TwitterStreamContainer.jsx

import React, { Component } from "react";

import TwitterStream from "./TwitterStream";

class TwitterStreamContainer extends Component {
  constructor(props) {
    super(props);

    this.state = {
      result: null
    }
  }
  componentDidMount() 
  { 
    fetch('/api/twitter', {
      headers: { "Content-Type": "application/json; charset=utf-8" },
      method: 'GET'
    })        
    .then(res => res.json())
    .then((data) => {
      if(data != null) {
        console.log("Starting Twitter", this.state.result);
        this.setState({result: data});
      }
    })
  }
  componentDidUpdate() 
  { 
    console.log("Updated twitter", this.state.result);
  }
  render() {
    return (
      <div>
        <div class="twitter-data">
          <TwitterStream data={this.state.result}/>
        </div>
      </div>
    );
  }
}

export default TwitterStreamContainer;

router.ex

scope "/api", ProfiloWeb do
    pipe_through [:api, :protected]

    get "/twitter", PageController, :twitter
  end

page_controller.ex

defmodule ProfiloWeb.PageController do
  use ProfiloWeb, :controller

  def index(conn, _params) do
    render(conn, "index.html")
  end

  def twitter(conn, _params) do
    data = ExTwitter.request(:get, "1.1/statuses/home_timeline.json")
    render(conn, "data.json", twitter: data)
  end
end

page_view.ex

defmodule ProfiloWeb.PageView do
  use ProfiloWeb, :view

  def render("data.json", %{twitter: data}) do
    %{
      data: data
    }
  end
end

Here might be your problem, you are using a token that is yours as the authorization, you should use the one you get from oauth flow AFAIK so each user has its own and can access its personal data. Might be happening the same thing with the Twitter component

@joaoevangelista is right, you are not using the users access token. You would have to set up a custom controller to save the access token, as currently only the user data is passed on to the controller.

It would be a great addition to PowAssent if you could just update the user identity schema like so:

defmodule MyApp.UserIdentities.UserIdentity do
  use Ecto.Schema
  use PowAssent.Ecto.UserIdentities.Schema,
    user: MyApp.Users.User

  schema "user_identities" do
    field :access_token, :string

    pow_assent_user_identity_fields()

    timestamps(updated_at: false)
  end

  def changeset(user_identity_or_changeset, attrs) do
    user_identity_or_changeset
    |> pow_assent_changeset(attrs)
    |> Ecto.Changeset.cast(attrs, [:access_token])
  end
end

That would make it super easy to capture the access token. I’m working on a PR now since setting up a custom controller for the auth-callback flow unfortunately isn’t trivial, and something similar to the above would be far preferable.

Hey @danschultzer,

What @joaoevangelista says makes sense. Now for PowAssent how am I able to extract access_token from each oauth? I have added the access_token column for the field, see below.

migration.exs

defmodule Profilo.Repo.Migrations.UserTokenUserIdenitiesTable do
  use Ecto.Migration

  def change do
    alter table(:user_identities) do
      add :access_token, :string
    end
  end
end

user_identity.ex

defmodule Profilo.Accounts.Lib.UserIdentity do
  use Ecto.Schema
  use PowAssent.Ecto.UserIdentities.Schema, user: Profilo.Accounts.Lib.User

  schema "user_identities" do
    field :access_token, :string
    pow_assent_user_identity_fields()

    timestamps(updated_at: false)
  end

  def changeset(user_identity_or_changeset, attrs) do
    user_identity_or_changeset
    |> pow_assent_changeset(attrs)
    |> Ecto.Changeset.cast(attrs, [:access_token])
  end
end

Try with the master branch:

{:pow_assent, github: "danschultzer/pow_assent"}

I’m working to release PowAssent 0.3.0 asap

Edit: Just released 0.3.0, so you can go ahead and upgrade.

Beautiful! Thanks for the fast turn around @danschultzer.

I will be reviewing the changes you made to the commit, to get a better understanding of pow_assent.