Better Pattern for Protected State Vars

Investigate the following two methods for ensuring state vars are not leaked to unauthenticated users:

1. Inherit from a "protected state" class, which does not allow any of the fields to be returned unless the user is logged in.

class State(clerk.ClerkProtectedState):
    field1: int
    field2: str

2. Annotate a state class or var with a decorator, perhaps named auth_required, or protect, which allows you to specify 'permission' or 'role', similar to the react component:

@protect(permission="org:invoices:create")
class State(rx.State):
    field1: int
    field2: str


class State2(rx.State):
    field1: Protected[int, Role("org:billing")]
    field2: Protected[str, Permission("org:invoices:create")]
    field3: Protected[bool]

    @rx.var
    @protect(role="org:billing")
    def field4(self) -> str:
        return self._field2

Approach 1 is simple, encourages the substate behavior described above, and makes accessing the signed in user information straight forward... Approach 2 feels pretty magical, and allows for much finer-grained permissions, but has the dangerous default of allowing information to leak if you don't wrap one of the fields...

(Discord thread here)

Start by comparing the protected-state inheritance and decorator or type-annotation approaches described in issue #8, then review the linked Discord discussion for existing context. Done means documenting or agreeing on a safe pattern that prevents unauthenticated state leakage and defines the permission and role behavior.