Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit d5d8d67

Browse files
committed
feat: fetch userinfo and refactor code
1 parent 22e0424 commit d5d8d67

File tree

4 files changed

+77
-38
lines changed

4 files changed

+77
-38
lines changed

‎src/App.js‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,33 @@
11
import React from 'react';
2-
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';
3-
import {Home} from "./Home";
4-
import {Profile} from "./Profile";
5-
import {Callback} from "./Callback";
2+
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';
3+
import {Home} from "./Home";
4+
import {Profile} from "./Profile";
5+
import {Callback} from "./Callback";
66

77
function App() {
88

99
return (
10-
<Router>
11-
<nav className="navbar navbar-expand-lg navbar-dark bg-primary">
12-
<a className="navbar-brand" href="/">App-Auth JS Demo</a>
13-
<div className="collapse navbar-collapse" id="navbarNav">
14-
<ul className="navbar-nav">
15-
<li className="nav-item">
16-
<Link className="nav-link" to="/">Home</Link>
17-
</li>
18-
<li className="nav-item">
19-
<Link className="nav-link" to="/user">User</Link>
20-
</li>
21-
</ul>
22-
</div>
23-
</nav>
24-
25-
<div>
26-
<Route exact path="/" component={Home}/>
27-
<Route exact path="/profile" component={Profile}/>
28-
<Route exact path="/callback" component={Callback}/>
10+
<Router>
11+
<nav className="navbar navbar-expand-lg navbar-dark bg-primary">
12+
<a className="navbar-brand" href="/">React AppAuth JS</a>
13+
<div className="collapse navbar-collapse" id="navbarNav">
14+
<ul className="navbar-nav">
15+
<li className="nav-item">
16+
<Link className="nav-link" to="/">Home</Link>
17+
</li>
18+
<li className="nav-item">
19+
<Link className="nav-link" to="/profile">Profile</Link>
20+
</li>
21+
</ul>
2922
</div>
30-
</Router>
23+
</nav>
24+
25+
<div>
26+
<Route exact path="/" component={Home} />
27+
<Route exact path="/profile" component={Profile} />
28+
<Route exact path="/callback" component={Callback} />
29+
</div>
30+
</Router>
3131
);
3232
}
3333

‎src/Callback.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export const Callback = (props) => {
4949
})
5050
.then((oResponse) => {
5151
localStorage.setItem('access_token', oResponse.accessToken);
52-
props.history.push('/user');
52+
props.history.push('/profile');
5353
})
5454
.catch(oError => {
5555
setError(oError);

‎src/Home.js‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import React, {useState} from 'react';
1+
import React, {useState} from 'react';
22
import {
33
AuthorizationServiceConfiguration,
44
AuthorizationRequest, RedirectRequestHandler,
55
FetchRequestor, LocalStorageBackend, DefaultCrypto
66
} from '@openid/appauth';
7-
import {NoHashQueryStringUtils} from './noHashQueryStringUtils';
7+
import {NoHashQueryStringUtils} from './noHashQueryStringUtils';
88
import environment from './environment';
99

1010
export const Home = () => {
@@ -43,10 +43,18 @@ export const Home = () => {
4343
<div className="card">
4444
<div className="card-body">
4545
<h5 className="card-title">Welcome !!!</h5>
46-
<p className="card-text">Angular Demo Application protected by <a href="https://gluu.org"
47-
rel="noopener noreferrer" target="_blank">Gluu
48-
CE OpenID Connect</a> using <a href="https://github.com/openid/AppAuth-JS" rel="noopener noreferrer"
49-
target="_blank">App Auth JS</a></p>
46+
<p className="card-text">React Demo Application protected by &nbsp;
47+
<a href="https://auth0.com" rel="noopener noreferrer" target="_blank">
48+
Auth0
49+
</a>
50+
51+
&nbsp; using &nbsp;
52+
53+
<a href="https://github.com/openid/AppAuth-JS" rel="noopener noreferrer"
54+
target="_blank">
55+
App Auth JS
56+
</a>
57+
</p>
5058
<button type="button" className="btn btn-primary" onClick={redirect}>Login</button>
5159
</div>
5260
</div>

‎src/Profile.js‎

Lines changed: 38 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,53 @@
1-
import React from 'react';
1+
import React, { useState, useEffect } from 'react';
2+
import environment from './environment';
3+
4+
const fetchUserInfo = async (token) => {
5+
const res = await fetch(`${environment.OPServer}${environment.userInfoEndpoint}`, {
6+
headers: {
7+
authorization: `Bearer ${token}`
8+
}
9+
});
10+
return res.json();
11+
};
212

313
export const Profile = () => {
4-
return (
5-
<div className="container mt-3">
14+
const [userInfo, setUserInfo] = useState(null);
15+
16+
useEffect(() => {
17+
const fetchToken = localStorage.getItem('access_token');
18+
fetchUserInfo(fetchToken)
19+
.then((info) => {
20+
console.log(info);
21+
setUserInfo(info);
22+
})
23+
return () => {
24+
}
25+
}, [])
26+
27+
const DisplayUserInfo = () => {
28+
return (
629
<div className="card text-white bg-success mb-3">
730
<div className="card-body">
8-
<p className="card-text">Access Token: </p>
9-
<h5 className="card-title">User info</h5>
10-
<pre className="card-text">userInfo</pre>
31+
<h5 className="card-title">Userinfo</h5>
32+
<p className="card-text">{JSON.stringify(userInfo)}</p>
1133
</div>
1234
</div>
35+
)
36+
};
1337

38+
const UnAuthorized = () => {
39+
return (
1440
<div className="card text-white bg-danger mb-3">
1541
<div className="card-body">
1642
<h5 className="card-title">You are un authenticate!</h5>
1743
</div>
1844
</div>
19-
</div>
45+
)
46+
};
2047

48+
return (
49+
<div className="container mt-3">
50+
{ userInfo ? <DisplayUserInfo /> : <UnAuthorized /> }
51+
</div>
2152
);
2253
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /