PropelAuth Supports Custom User Schemas & Profile Pictures

At PropelAuth, our mission is to provide our customers with easy-to-use authentication and user management. We do this by providing pre-built UIs and APIs that a developer can integrate with in minutes.

User management is more than just getting users logged in. There's account linking with social providers, uploading profile pictures, inviting coworkers to the product, and so much more. Recently, we added support for (optionally) collecting more fields on signup like first name, last name, and a username.

‍

Additionally, your users can upload their own profile pictures for you to embed in your application.

‍

Show me some code

Since the collection/updating of these fields is done on your hosted pages. Displaying a user's profile picture in React/Next.js is as simple as:

import {withAuthInfo} from '@propelauth/react';

function ProfilePicture({isLoggedIn, user}) {
    // isLoggedIn and user are automatically added from withAuthInfo below
    if (isLoggedIn) {
        return <img src={user.pictureUrl} />
    } else {
        return null;
    }
}

export default withAuthInfo(ProfilePicture)

Check out or docs for examples in other languages like vanilla JS (no framework) or fetching the picture URL from your backend (which you may want to do if you want to display all the collaborators, for example). The user object has all the custom information you enable, so a React component that displays a welcome message could look like this:

import {withAuthInfo} from '@propelauth/react';

function WelcomeMessage({isLoggedIn, user}) {
    // isLoggedIn and user are automatically added from withAuthInfo below
    if (isLoggedIn) {
        return <div>Welcome back, {user.firstName}</div>
    } else {
        return <div>Welcome anonymous</div>
    }
}

export default withAuthInfo(WelcomeMessage)

We're excited to see what you build!

How does it work with Social/Passwordless?

Good question! With social logins (e.g. login with google), we try and get the information from the social provider, if it's available. If it isn't available, we will ask the user to fill it out before they finish signing up.

With passwordless, the user is prompted to fill in whatever information you request before they finish signing up.