I have currently setup my Oauth using pow_assent. However i’m running into an issue where the github pulls my data only. It isn’t pulling the github user’s data who was logged in using github oauth.
I am noticing the same thing happening for my twitter Oauth as well.
Do I need to change my config.exs file? Not really sure what this is happening.
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
1 Like
@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.
2 Likes
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.