Feature/auth

[voidKandy]

Auth PR

useAuth changes

signIn function

I updated our useAuth hook to export a signIn function:

const signIn = () => {
  router.push("/api/auth/login");
};

This is simple enough, all it does is direct users to 0Auth's login endpoint, which:

1. Directs users to 0auth's form, where users can either create an account w/ email and password or sign in with credentials from another provider (which we have to opt into on the 0Auth dashboard)
2. Once a user either signs up or logs in with other credentials they are directed back to the homepage of our site.

Important:
In order for this to work in prod, we will need to do some basic setup. I don't want to post sensitive info in a PR, so we should correspond over discord DMs to do this.

New useEffect

The call to useEffect in our useAuth hook now does the following:

1. Checks if there is already a user in sessionStorage, if there is, user is set and the hook returns
2. If there is not any user in sessionStorage, check if 0Auth's useUser has a user

• If there is no user here, useAuth returns, and there is no user
• this user is referred to as userState and is 0Auth's UserProfile interface:

interface UserProfile {
  email?: string | null;
  email_verified?: boolean | null;
  name?: string | null;
  nickname?: string | null;
  picture?: string | null;
  sub?: string | null;
  updated_at?: string | null;
  org_id?: string | null;
  [key: string]: unknown; // Any custom claim which could be in the profile
} 

3. If 0Auth's useUser does contain a user, we check api/users/{user.sub} (if this endpoint returns a user it means we have seen them before and already have user information on them)

I use user.sub because it is 0Auths unique user identifier, we can also use username for this endpoint. Either way it doesn't matter right now because this endpoint always returns null (presumably until we have an actual backend)

4. If api/users/{user.sub} returns null, we send the entire UserProfile to api/users/create to create our own version of the user (right now this endpoint just mocks some user data)
5. By now we should have gotten a user from either api/users/{user.sub}, or api/users/create. Both of these endpoints return UserProfileData if successful.

export interface UserProfileData {
  sub_token_claim: string;
  username: string;
  avatar: string;
  fullname?: string;
  email?: string;
  interests: string[];
  organizations: string[];
  twitter?: string;
  github?: string;
  linkedin?: string;
  homepage?: string;
  agreedToTerms: boolean;
  joinedAt: string;
}

Many of the fields of UserProfileData can be prepopulated by the fields of UserProfile, see api/user/create/route.ts for an example

/dashboard moved to /{userName}

Pretty self explanatory, I moved this route to match the spec

ProfileHeader

The header of what was in /dashboard has been moved to the ProfileHeader component. This contains everything the previous header had plus the following:

• Social Links
• A button that directs users to /settings
• followers/following counts/buttons

The Followers/Following counts/buttons do nothing when clicked right now and are not in their own component. ProfileHeader has two empty function definitions for onFollowers/FollowingClicked, this could be moved very easily, but I didn't see a reason to fully abstract the ProfileStats rendering, so they live in ProfileHeader for now. ProfileHeader queries /api/users/${user.sub_token_claim}/stats in a useEffect hook to get the profile stats; right now this endpoint returns mock data.

Again, we could easily change sub_token_claims to username if we wanted to use that instead of the sub for all these endpoints

Settings

I tried to mimic the settings page of huggingface for this. Adding new tabs should be very easy as I've created a SettingsTab component and current tab state management to the page.
None of the buttons do anything.

Important

As stated before, we need to do some minor setup for 0Auth to work:

• Create .env.local with correct info
• Turn off sync on sign in for external providers
• Opt into use of external providers we want (I think GitHub would be a really good external provider to use)
  Please feel free to DM me on discord for us to get this squared away

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
of-platform	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 15, 2024 5:44pm