Losing session when going to different page after login

22

I tried running this application on my local machine and I get the following error as soon as I click Login button:

image
image1920Ɨ1080 260 KB

23

I tried implementing just the basic login at https://github.com/IshaanOhri/pod-nextjs.git

And I get the same error which I posted above Unhandled Runtime Error as soon as I click Login button

Request you to please go through the repository and assist resolving the error

And why was Inruptā€™s experiment on creating a NextJS sample app not completed? Is there any particular reason?

24

The inrupt auth library removed a deprecation recently and inrupt.net (NSS) seams not to be compliant to recent Solid-OIDC discovery

25

Yes, I noticed. The code seems to break in v1.11.5 of @inrupt/solid-client-authn-browser

26

The issue reported on v1.11.5 of @inrupt/solid-client-authn-browser was recorded here: Code break in v1.11.5 Ā· Issue #1991 Ā· inrupt/solid-client-authn-js Ā· GitHub (thanks @IshaanOhri for opening it) ā†’ there are updates on it. The publicly available NSS servers (inrupt.net, solidcommunity.net, solidweb.org) have been patched.

27

For the time being I have rolled back my package version to 1.11.3 , which works perfectly for me. But still waiting for a resolution from Inruptā€™s side

28

v1.11.6 of solid-client-authn was just released, and should fix the issue introduced in v1.11.5.

1 Like
29

@IshaanOhri Iā€™ve just had a look at how your application at IshaanOhri/pod-test works, and you already have a single page app, as youā€™re using react-router ā€” the issue is that youā€™re only restoring the session in one of those routes, not all.

Iā€™ve just been refactoring pod-browser to fix issues relating to session management, so that may be a source of ideas: Improve Session Handling: Block rendering until session state is known by ThisIsMissEm Ā· Pull Request #437 Ā· inrupt/pod-browser Ā· GitHub (note: I still need to finish and push the latest changes, so take a look at that PR on monday and you should see what Iā€™m talking about)

Essentially you need to do session management at application level, and then have routes under that ā€” that is, one session as you navigate through the app, and all reloads will result in a session being created. Hereā€™s another example from React Routerā€™s documentation: React-router Auth Example - StackBlitz

(Edit: Iā€™m also starting to think about a future version of our solid-ui-react which would be lifting a bunch of the implementation weā€™re doing in pod-browser up into the SDK, such that itā€™s much simpler for developers to use & build reliable apps)

2 Likes
30

Hello, I have the same issue but Iā€™m using another aproach.

I have client side navigation using React and Routes and I wrap the app in the SessionProvider from ā€œ@inrupt/solid-ui-reactā€

ReactDOM.render(
	<SessionProvider>
		<App />
	</SessionProvider>,
	document.getElementById("root"),
);

In the app itself Iā€™m trying to use the session provided by the same module which I first login in the login page which has a LoginButton also by the same module.

function App(): JSX.Element {
	const { session, sessionRequestInProgress } = useSession();

	var app = (
		<div className="App">
			<NavBar />
			<Router>
				<Routes>
					<Route path="/" element={<Home />} />
					<Route path="/Tienda" element={<Tienda />} />
					<Route path="/Login" element={<Login />} />
				</Routes>
			</Router>
			<div className="infosession">
				{session.info.isLoggedIn ? <h1>Logged in</h1> : <h1>Not Logged in</h1>}
				{sessionRequestInProgress ? <h1>Request in</h1> : <h1>Not Request in</h1>}
			</div>
			<Footer />
		</div>
	);

	return app;
}

const Login = () => {
	const idp = "https://broker.pod.inrupt.com";
	const redirUrl = "http://localhost:3000/Tienda";
	return (
		<div>
			<div id="formLogin">
				<img src={foto}></img>
				<LoginButton
					authOptions={{ clientName: "dede_es4c" }}
					oidcIssuer={idp}
					redirectUrl={redirUrl}
				>
					<LinkButton variant="small">Log In</LinkButton>
				</LoginButton>
			</div>
		</div>
	);
};

Login has not known issues and after login, using the inrup page, it displays that user is logged in but when I move to any other page or just reload the page the user is not logged anymore.

31

I think youā€™ll want restorePreviousSession set on SessionProvider, off top of head.

Like, if you do a full page reload (e.g., by reloading or clicking a link thatā€™s not part of an SPA) then the SDK looses its session state unless youā€™ve restorePreviousSession set.

Though thereā€™s a bunch more to properly handling sessions than just that ā€” see the 437 pull request on podbrowser that just shipped.

1 Like