Skip to content

Instantly share code, notes, and snippets.

@dmurawsky
Last active November 10, 2017 17:21
Show Gist options
  • Save dmurawsky/f02cac8e559e4d8cbde82ce94332e7b4 to your computer and use it in GitHub Desktop.
Save dmurawsky/f02cac8e559e4d8cbde82ce94332e7b4 to your computer and use it in GitHub Desktop.
Simple react app to auth with auth0 and display token
import React, { Component } from "react";
import ReactDOM from "react-dom";
import auth0 from "auth0-js";
class App extends Component {
constructor(props, cxt) {
super(props, cxt);
this.componentDidMount = this.componentDidMount.bind(this);
this._login = this._login.bind(this);
const auth = new auth0.WebAuth({
domain: "<AUTH0_DOMAIN>.auth0.com",
clientID: "<AUTH0_CLIENT_ID>",
redirectUri: "http://localhost:3000",
audience: "https://<AUTH0_DOMAIN>.auth0.com/userinfo",
responseType: "token id_token",
scope: "openid"
});
this.state = {
searches: [],
auth
};
}
componentDidMount() {
this.setState(() => ({
searches: location.hash
.substring(1)
.split("&")
.map(s => s.split("="))
}));
}
_login() {
this.state.auth.authorize();
}
render() {
return (
<div style={{ margin: 80 }}>
<button onClick={this._login}>AUTH</button>
<hr />
{this.state.searches.map(s => (
<div key={JSON.stringify(s)}>
<p style={{ wordBreak: "break-all" }}>
<strong>{s[0]}</strong>
<br />
{s[1]}
</p>
</div>
))}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
{
"name": "auth0-login",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-scripts": "0.9.5"
},
"dependencies": {
"auth0-js": "^8.8.0",
"react": "^15.5.4",
"react-dom": "^15.5.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"eject": "react-scripts eject"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment