Skip to content

fix: resolve User is not unauthenticated error seen on logout #10349

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 19, 2023
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
fix: do not cache getAuthenticatedUser call
  • Loading branch information
Kira-Pilot committed Oct 19, 2023
commit 52b9b72e3dbe7fb3f9303d2f65de6d88083b3963
1 change: 0 additions & 1 deletion site/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@
<meta property="og:type" content="website" />
<meta property="csrf-token" content="{{ .CSRF.Token }}" />
<meta property="build-info" content="{{ .BuildInfo }}" />
<meta property="user" content="{{ .User }}" />
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can I get a gut check here that this is safe to take out?? Seems fine but I am not very familiar with these tags and I don't want to break anything.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This shouldn't be taken out! It makes the page load faster. See:

coder/site/site.go

Lines 302 to 307 in 21f8731

// Cookies are sent when requesting HTML, so we can get the user
// and pre-populate the state for the frontend to reduce requests.
// We use a noop response writer because we don't want to write
// anything to the response and break the HTML, an error means we
// simply don't pre-populate the state.
noopRW := noopResponseWriter{}

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kylecarbs @BrunoQuaresma Gotcha! So if I understand correctly, we return some API responses when the user requests index.html. This is achieved via these meta tags.

I see this pattern some places in the app:
getMetadataAsJSON<Entitlements>("entitlements") ?? API.getEntitlements()

And I'm confused because 1) wouldn't we always want fresh entitlement data? and 2) don't we already load entitlement data again in our DashboardProvider which wraps all authenticated routes?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Whenever the user loads index.html (e.g. you navigate to dev.coder.com), that would provide fresh entitlement data. It's similar to making the request from the FE, we just do it on page load.

The DashboardProvider re-fetching it would be a bug in that case.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, but given this pattern:
async () => getMetadataAsJSON<User>("user") ?? API.getAuthenticatedUser(),
if a user doesn't refresh the page between login and logout, I think we'll see this bug because the user request is never rehydrated, right

<meta property="entitlements" content="{{ .Entitlements }}" />
<meta property="appearance" content="{{ .Appearance }}" />
<meta property="experiments" content="{{ .Experiments }}" />
Expand Down
20 changes: 4 additions & 16 deletions site/src/api/queries/users.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,8 @@ import {
GetUsersResponse,
UpdateUserPasswordRequest,
UpdateUserProfileRequest,
User,
UsersRequest,
} from "api/typesGenerated";
import { getMetadataAsJSON } from "utils/metadata";
import { getAuthorizationKey } from "./authCheck";

export const users = (req: UsersRequest): UseQueryOptions<GetUsersResponse> => {
Expand Down Expand Up @@ -89,21 +87,11 @@ export const authMethods = () => {
};
};

const initialMeData = getMetadataAsJSON<User>("user");
const meKey = ["me"] as const;

export const me = (queryClient: QueryClient) => {
export const me = () => {
return {
queryKey: meKey,
queryFn: async () => {
const cachedData = queryClient.getQueryData(meKey);
if (cachedData === undefined && initialMeData !== undefined) {
return initialMeData;
}

return API.getAuthenticatedUser();
},
} satisfies UseQueryOptions<User>;
Copy link
Collaborator

@BrunoQuaresma BrunoQuaresma Oct 19, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hm... @Parkreiner @Kira-Pilot maybe we should do something different like:

 return {
    queryKey: meKey,
    initialData: initialMe,
    queryFn: API.getAuthenticatedUser,
 }

Because if the initialData is undefined the query will be loaded anyways.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah...This works perfectly. I double-checked the React Query type definitions, and somehow missed that initialData had an extra undefined type tagged on to its allowable values, and that it wouldn't affect the type parameters at all. I also double-checked the documentation, and found a section on this use case

I'm going to make another PR simplifying all the other functions that work like this

queryKey: ["me"],
queryFn: async () => API.getAuthenticatedUser(),
};
};

export const hasFirstUser = () => {
Expand Down
2 changes: 1 addition & 1 deletion site/src/components/AuthProvider/AuthProvider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const AuthContext = createContext<AuthContextValue | undefined>(undefined);

export const AuthProvider: FC<PropsWithChildren> = ({ children }) => {
const queryClient = useQueryClient();
const meOptions = me(queryClient);
const meOptions = me();

const userQuery = useQuery(meOptions);
const authMethodsQuery = useQuery(authMethods());
Expand Down