menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

Divjoy

The βš›οΈ React codebase generator.

Channels
Team

Introducing our new and improved useAuth() hook πŸ™Œ

June 16, 2020 at 10:38pm

Introducing our new and improved useAuth() hook πŸ™Œ

June 16, 2020 at 10:38pm (Edited 2 years ago)
The Divjoy useAuth() hook now auto-fetches and merges custom user data from your database. Previously it would just give you the auth user object (from Firebase or Auth0 depending on your choice) and you had to call our useUser() hook to fetch extra user-related data from your database. That's now all handled automatically.
That means less fetching and dealing with loading states. One hook gives you all the user data you need πŸ•Ί πŸ’ƒπŸΎ πŸ€Έβ€β™€οΈ
If you have an existing Divjoy project simply export a new codebase and swap out your src/util/auth.js file for the new one. You can then remove any calls to useUser in your codebase and reference your custom data as part of the auth object instead (such as auth.user.stripeSubscriptionId).
Let me know if you have any questions!

July 24, 2020 at 4:23pm
could you post a small example of how you would use useAuth in a functional component?
Hey Mike, here's an example:
import { useAuth } from "./../util/auth.js";
function MyComponent() {
// Get the auth object in any component
const auth = useAuth();
// Depending on auth state show signin or signout button
// auth.user will either be an object, null when loading, or false if signed out
return (
<div>
{auth.user ? (
<button onClick={(e) => auth.signout()}>Signout</button>
) : (
<button onClick={(e) => auth.signin("[email protected]", "yolo")}>
Signin
</button>
)}
</div>
);
}
Fyi, this example is also in the readme included in your codebase under the Authentication section
Let me know if you have any questions!

July 25, 2020 at 5:06pm