My application has functionality to send an invitation to create an account.
The link is created and sent using a server side method, the invitationId stored in a collection.
> ${Meteor.absoluteUrl(`accept-invite/${invitationId}`)}
> http://myapp.com/accept-invite/emwwKwZkjhWE5KrYs
This works good. Navigation to the accept-invite page is successful (React Router v4)
My error says params is undefined as I can not seem to grab invitiationId "emwwKwZkjhWE5KrYs" or token upon loading the accept-invite/:token
My accept-invite page withTracker
export default withTracker(({ params }) => {
const invitationId = params.token;
const subscription = Meteor.subscribe('invitations.accept', invitationId);
return{
loading: !subscription.ready(),
invitation: Invitations.findOne(invitationId),
};
})(AcceptInvitation);
my error is params is undefined, invitation_id / token value is not being assigned any upon loading my accept-invite page, stumping myself because I feel I am missing a piece of logic!
The above and first comment worked for me.
export default withTracker(({match}) => {
const invitationId = match.params.token.replace('=','');
this let me take incoming parameter defined as a :/token in React Router v4 (Meteor)
example http://maddog.com/accept-invite/:=youthebest
invitation id is equal to youthebest
Related
Context & Reproducible Scenario
I'm using the combination of these libraries and tools:
NextJS 12+ (based on React 18+)
MSAL-Browser 2.25+ and MSAL-React 1.6+ (Microsoft's libs for OpenID login against Azure B2C)
I'm using the Auth Code + PKCE redirect flow so this is the flow for users:
They land on /, the home page
They click a /me router link
They go to Azure B2C to log in because said page has this logic:
<MsalAuthenticationTemplate
interactionType={InteractionType.Redirect}
authenticationRequest={loginRequest}>
where loginRequest.state is set to router.asPath (the "intended" page: /me)
Note that the page is also wrapped in a <NoSsr> component based off Stack Overflow.
User logs in on Azure B2C, gets redirected back to my app at / (the root)
⛔ Problem: the user now briefly sees the / (home) page
After a very brief moment, the user gets sent to /me where they are signed in
The MSAL docs don't seem to have much on the state property from OIDC or this redirect behavior, and I can't find much about this in the MSAL sample for NextJS either.
In short: the issue
How do I make sure MSAL-React in my NextJS application send users to the "intended" page immediately on startup, without briefly showing the root page where the Identity Server redirects to?
Relevant extra information
Here's my custom _app.js component, which seems relevant because it is a component that triggers handleRedirectPromise which causes the redirect to intended page:
export default function MyApp({ Component, pageProps }) {
return (
<MsalProvider instance={msalInstance}>
<PageHeader></PageHeader>
<Component {...pageProps} />
</MsalProvider>
);
}
PS. To help folks searching online find this question: the behavior is triggered by navigateToLoginRequestUrl: true (is the default) in the configuration. Setting it to false plainly disables sending the user to the intended page at all.
Attempted solutions with middleware
I figured based on how APP_INITIALIZERs work in Angular, to use middleware like this at some point:
// From another file:
// export const msalInstance = new PublicClientApplication(msalConfig);
export async function middleware(_request) {
const targetUrlAfterLoginRedirect = await msalInstance.handleRedirectPromise()
.then((result) => {
if (!!result && !!result.state) {
return result.state;
}
return null;
});
console.log('Found intended target before login flow: ', targetUrlAfterLoginRedirect);
// TODO: Send user to the intended page with router.
}
However, this logs on the server's console:
Found intended target before login flow: null
So it seems middleware is too early for msal-react to cope with? Shame, because middleware would've been perfect, to allow as much SSR for target pages as possible.
It's not an option to change the redirect URL on B2C's side, because I'll be constantly adding new routes to my app that need this behavior.
Note that I also tried to use middleware to just sniff out the state myself, but since the middleware runs on Node it won't have access to the hash fragment.
Animated GIF showing the flashing home page
Here's an animated gif that shows the /home page is briefly (200ms or so) shown before /me is properly opened. Warning, gif is a wee bit flashy so in a spoiler tag:
Attempted solution with custom NavigationClient
I've tried adding a custom NavigationClient to more closely mimic the nextjs sample from Microsoft's repository, like this:
import { NavigationClient } from "#azure/msal-browser";
// See: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/performance.md#how-to-configure-azuremsal-react-to-use-your-routers-navigate-function-for-client-side-navigation
export class CustomNavigationClient extends NavigationClient {
constructor(router) {
super();
this.router = router;
}
async navigateInternal(url, options) {
console.log('👍 Navigating Internal to', url);
const relativePath = url.replace(window.location.origin, "");
if (options.noHistory) {
this.router.replace(relativePath);
} else {
this.router.push(relativePath);
}
return false;
}
}
This did not solve the issue. The console.log is there allowing me to confirm this code is not run on the server, as the Node logs don't show it.
Attempted solution: go through MSAL's SSR docs
Another thing I've tried is going through the documentation claiming #azure/msal-react supports Server Side Rendering (SSR) but those docs nor the linked samples demonstrate how to solve my issue.
Attempted solution in _app.tsx
Another workaround I considered was to sniff out the hash fragment client side when the user returns to my app (and make sure the intended page is also in that state). I can successfully send the OpenID state to B2C like this...
const extendedAuthenticationRequest = {
...authenticationRequest,
state: `~path~${asPath}~path~`,
};
...and see it returned in the Network tab of the dev tools.
However, when I try to extract it in my _app.tsx still doesn't work. I tried this code from another Stack Overflow answer to get the .hash:
const [isMounted, setMounted] = useState(false);
useEffect(() => {
if (isMounted) {
console.log('====> saw the following hash', window.location.hash);
const matches = /~path~(.+)~path~/.exec(window.location.hash);
if (matches && matches.length > 0 && matches[1]) {
const targetUrlAfterOpenIdRedirect = decodeURIComponent(matches[1]);
console.log("Routing to", targetUrlAfterOpenIdRedirect);
router.replace(targetUrlAfterOpenIdRedirect);
}
} else {
setMounted(true);
}
}, [isMounted]);
if (!isMounted) return null;
// else: render <MsalProvider> and the intended page component
This does find the intended page from the state and executes routing, but still flashes the /home page before going to the intended page.
Footnote: related GitHub issue
Submitted an issue at MSAL's GitHub repository too.
I have such a page structure.
locale can be any value from the language-country pair
eg en-ca, fr-fr, ar-en
[locale] // main folder route
page1.tsx // child route
page2.tsx // child route
page3.tsx // child route
For example, if I go to the address /page1, then I redirect to /locale/page1
But the problem is that I check on the browser side and first a 404 page appears in the browser and only then redirects to the correct address.
I think that it is necessary to check on the server.
I was making my own file for the server. But the problem is that there is no way to track the address for which the request is going and that means I cannot check if the address starts with the parameter I need.
In case you do not wont to use Next.js native i18n routing you can create fallback page file pages/[...fallback].ts to catch all non-existing page. Then you can use use getServerSideProps to redirect properly.
This could work for you (not tested):
// The page content will never be rendered
const FallbackPage = () => <div>Redirecting...</div>
// Is processed on every request on server side
export const getServerSideProps: GetServerSideProps = async (ctx) => {
// TODO: add custom detection (e.g. based on headers or cookies)
const locale = 'en'
const destination = `/${locale}/${ctx.params.fallback.join('/')}`
return {
props: {},
redirect: { destination, permanent: false },
}
}
export default FallbackPage
So, I'm attempting to pass a user's ip address in my app, as follows:
pages/Item.js
const Item = props => (
<div>
<SingleItem id={props.query.id} userIP={props.userIP} />
</div>
);
Item.getInitialProps = async ({ req }) => {
const userIP = req.headers['x-real-ip'] || req.connection.remoteAddress
return { userIP }
}
export default withAmp(Item, { hybrid: true });
but get the above mentioned error message (See attached image) when navigating to the page. But if I then do a hard reload of the page the ip details are correctly displayed to the page.
What am I overlooking here and is there a better way to achieve this, for example obtaining the ip address from headers in _document.js?
req will only be available when getInitialProps is called on the server. This is why it works when you do a refresh on the page.
When navigating to the page there is no server render so getInitialProps will be called on the client. Therefore, req will be undefined.
You can wrap the assignment in a condition to check if req is defined to prevent the error:
Item.getInitialProps = async ({ req }) => {
let userIP
if (req) {
userIP = req.headers['x-real-ip'] || req.connection.remoteAddress
}
return { userIP }
}
However, if you want to have userIP available on every page, regardless of whether it's server or client rendered, then you will need to find a way to store it on first load, whichever page that may be.
Perhaps you could store it using context.
There is am example of using context here:
https://github.com/zeit/next.js/tree/master/examples/with-context-api
I hope this helps.
Lately I'm trying to set-up authentication using IdentityServer4 with a React client. I followed the Adding a JavaScript client tutorial (partly) of the IdentityServer documentation: https://media.readthedocs.org/pdf/identityserver4/release/identityserver4.pdf also using the Quickstart7_JavaScriptClient file.
The downside is that I'm using React as my front-end and my knowledge of React is not good enough to implement the same functionality used in the tutorial using React.
Nevertheless, I start reading up and tried to get started with it anyway. My IdentityServer project and API are set-up and seem to be working correctly (also tested with other clients).
I started by adding the oidc-client.js to my Visual Code project. Next I created a page which get's rendered at the start (named it Authentication.js) and this is the place where the Login, Call API and Logout buttons are included. This page (Authentication.js) looks as follows:
import React, { Component } from 'react';
import {login, logout, api, log} from '../../testoidc'
import {Route, Link} from 'react-router';
export default class Authentication extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<div>
<button id="login" onClick={() => {login()}}>Login</button>
<button id="api" onClick={() => {api()}}>Call API</button>
<button id="logout" onClick={() => {logout()}}>Logout</button>
<pre id="results"></pre>
</div>
<div>
<Route exact path="/callback" render={() => {window.location.href="callback.html"}} />
{/* {<Route path='/callback' component={callback}>callback</Route>} */}
</div>
</div>
);
}
}
In the testoidc.js file (which get's imported above) I added all the oidc functions which are used (app.js in the example projects). The route part should make the callback.html available, I have left that file as is (which is probably wrong).
The testoidc.js file contains the functions as follow:
import Oidc from 'oidc-client'
export function log() {
document.getElementById('results').innerText = '';
Array.prototype.forEach.call(arguments, function (msg) {
if (msg instanceof Error) {
msg = "Error: " + msg.message;
}
else if (typeof msg !== 'string') {
msg = JSON.stringify(msg, null, 2);
}
document.getElementById('results').innerHTML += msg + '\r\n';
});
}
var config = {
authority: "http://localhost:5000",
client_id: "js",
redirect_uri: "http://localhost:3000/callback.html",
response_type: "id_token token",
scope:"openid profile api1",
post_logout_redirect_uri : "http://localhost:3000/index.html",
};
var mgr = new Oidc.UserManager(config);
mgr.getUser().then(function (user) {
if (user) {
log("User logged in", user.profile);
}
else {
log("User not logged in");
}
});
export function login() {
mgr.signinRedirect();
}
export function api() {
mgr.getUser().then(function (user) {
var url = "http://localhost:5001/identity";
var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.onload = function () {
log(xhr.status, JSON.parse(xhr.responseText));
}
xhr.setRequestHeader("Authorization", "Bearer " + user.access_token);
xhr.send();
});
}
export function logout() {
mgr.signoutRedirect();
}
There are multiple things going wrong. When I click the login button, I get redirected to the login page of the identityServer (which is good). When I log in with valid credentials I'm getting redirected to my React app: http://localhost:3000/callback.html#id_token=Token
This client in the Identity project is defined as follows:
new Client
{
ClientId = "js",
ClientName = "JavaScript Client",
AllowedGrantTypes = GrantTypes.Implicit,
AllowAccessTokensViaBrowser = true,
// where to redirect to after login
RedirectUris = { "http://localhost:3000/callback.html" },
// where to redirect to after logout
PostLogoutRedirectUris = { "http://localhost:3000/index.html" },
AllowedCorsOrigins = { "http://localhost:3000" },
AllowedScopes =
{
IdentityServerConstants.StandardScopes.OpenId,
IdentityServerConstants.StandardScopes.Profile,
"api1"
}
}
Though, it seems the callback function is never called, it just stays on the callback url with a very long token behind it..
Also the getUser function keeps displaying 'User not logged in' after logging in and the Call API button keeps saying that there is no token. So obviously things are not working correctly. I just don't know on which points it goes wrong.
When inspecting I can see there is a token generated in the local storage:
Also when I click the logout button, I get redirected to the logout page of the Identity Host, but when I click logout there I don't get redirected to my client.
My questions are:
Am I on the right track implementing the oidc-client in combination with IdentityServer4?
Am I using the correct libraries or does react require different libraries than the oidc-client.js one.
Is there any tutorial where a react front-end is used in combination with IdentityServer4 and the oidc-client (without redux), I couldn't find any.
How / where to add the callback.html, should it be rewritten?
Could someone point me in the right direction, there are most likely more things going wrong here but at the moment I am just stuck in where to even begin.
IdentityServer4 is just a backend implementation of OIDC; so, all you need to do is implement the flow in the client using the given APIs. I don't know what oidc-client.js file is but it is most likely doing the same thing that you could have implemented yourself. The flow itself is very simple:
React app prepares the request and redirects the user to the Auth server with client_id and redirect_uri (and state, nonce)
IdentityServer checks if the client_id and redirect_uri match.
If the user is not logged in, show a login box
If a consent form is necessary (similar to when you login via Facebook/Google in some apps), show the necessary interactions
If user is authenticated and authorized, redirect the page to the redirect_uri with new parameters. In your case, you the URL will look like this: https://example.com/cb#access_token=...&id_token=...&stuff-like-nonce-and-state
Now, the React app needs to parse the URL, access the values, and store the token somewhere to be used in future requests:
Easiest way to achieve the logic is to first set a route in the router that resolves into a component that will do the logic. This component can be "invisible." It doesn't even need to render anything. You can set the route like this:
<Route path="/cb" component={AuthorizeCallback} />
Then, implement OIDC client logic in AuthorizeCallback component. In the component, you just need to parse the URL. You can use location.hash to access #access_token=...&id_token=...&stuff-like-nonce-and-state part of the URL. You can use URLSearchParams or a 3rd party library like qs. Then, just store the value in somewhere (sessionStorage, localStorage, and if possible, cookies). Anything else you do is just implementation details. For example, in one of my apps, in order to remember the active page that user was on in the app, I store the value in sessionStorage and then use the value from that storage in AuthorizeCallback to redirect the user to the proper page. So, Auth server redirects to "/cb" that resolves to AuthorizeCallback and this component redirects to the desired location (or "/" if no location was set) based on where the user is.
Also, remember that if the Authorization server's session cookie is not expired, you will not need to relogin if the token is expired or deleted. This is useful if the token is expired but it can be problematic when you log out. That's why when you log out, you need to send a request to Authorization server to delete / expire the token immediately before deleting the token from your storage.
What's the accepted method of authenticating with OAuth2 in React using Redux?
My current setup involves wrapping react-router components using Redux-Auth-Wrapper, and if the user is not authenticated, dispatching an action that makes the necessary external URL GET request to an OAuth provider (google in this case).
OAuth2 requires sending a callback URL with your request, so I've set up a react-router url endpoint/component that, when onComponentDidMount fires, dispatches actions to parse the returned hash that comes from the OAuth provider, store that data in the redux store, and redirect the user to the page they originally requested, which is stored in the state parameter of the OAuth request.
This all seems very hacky. It is also difficult to manage the OAuth2 callback URL between production and development environments. Does anybody have a slick OAuth2 workflow working?
P.S. I need to get the Auth Token to the client so that it can be used to make client side API requests that use that token to check the user has access to those resources.
The following is a function that will fetch the token and expiry data from google and store it in local storage. It could be modified to simply return that data as an object.
function oAuth2TokenGet() {
// TODO: First try to get the token from sessionStorage here
// Build the oauth request url
const responseType = 'token';
const clientId = 'YOUR-GOOGLE-CLIENT-ID';
const redirectUri = 'YOUR-REDIRECT-URL';
const scope = 'email profile';
const prompt = 'select_account';
const url = `https://accounts.google.com/o/oauth2/v2/auth?response_type=${responseType}&client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scope}&prompt=${prompt}`;
// Open a new window
const win = window.open(url, 'name', 'height=600,width=450');
if (win) win.focus();
const pollTimer = window.setInterval(() => {
try {
if (!!win && win.location.href.indexOf(redirectUri) !== -1) {
window.clearInterval(pollTimer);
// Get the URL hash with your token in it
const hash = win.location.hash;
win.close();
// Parse the string hash and convert to object of keys and values
const result = hash.substring(1)
.split('&')
.map(i => i.split('='))
.reduce((prev, curr) => ({
...prev,
[curr[0]]: curr[1],
}), {});
// Calculate when the token expires and store in the result object
result.expires_at = Date.now() + parseInt(hash.expires_in, 10);
// TODO: Persist result in sessionStorage here
}
} catch (err) {
// do something or nothing if window still not redirected after login
}
}, 100);
}
I've come up with a better solution which involves opening a new window with the OAuth login form, which is then polled by the parent window to see if it has redirected to the callback URL. Once it has, you can capture the child window url with hash that contains the OAuth token information in the parent window and close the child window. You can then parse this hash out and add it to your applications state.
This tutorial was particularly helpful.